polyfill是什麼?

alexianalexian
2019-05-26
JavaScript

人在江湖,身不由己,在接案的過程中,總有一些你不想接、但也不得不接的案子,而且客戶的需求總是想要包山包海(卻拿不出摳摳)。而網站的前端開發者最常遇到的難題,絕對是瀏覽器版本相容的問題。

通常這類的案件,我都會避免使用Vue、React等前端框架,畢竟他們還要注意SEO的問題,而且他們更希望能夠支援至IE8的環境,像Vue表明不支援IE8的狀況下,使用傳統的方式是比較穩妥的做法。因此我用上了jQuery,希望避免相容性的問題。想當然,問題還是出現了,這時候,也polyfill也就應運而生。

polyfill 這個單詞是由 Remy Sharp 發揚光大的,polyfill代指為舊瀏覽器實現或模擬現有版本已實現之功能的程式碼片段。

例如在ie一直沒有實現Array.includes()這個方法,於是我們為了在ie實現這個方法,會引用下面的polyfill(參考自MDN):

if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        // c. Increase k by 1.
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

加入後便可以在IE的環境下使用Arrar.includes()方法了。

而當使用前端框架開發時,它們提供的新手包已經使用babel-polyfill套件來完成這個任務,所以新手在開發時不需要擔心問題,但也因此會忽略這個知識,而我也曾經是當中的一員,故寫了這一篇,幫助自己記憶。

而在polyfill之前,也有一個相類似的名詞--shim,shim同樣也是為舊版環境提供現有功能的程式碼,但polyfill與shim最大的不同,是polyfill實現的功能都是官方正式公怖並實現的規範,shim則是實現原生沒有的功能(例如lowdash),而這也是 Remy Sharp使用polyfill一詞去作具分的原因。

那麼什麼時候才要用polyfill呢?這取決於客戶和使用者瀏覽的環境,如果環境是能夠實現需要的功能,那就避免放入冗長的polyfill,而我平常會使用 https://caniuse.com/ 檢查這原生方法是否有在該環境實現,來決定是否載入該polyfill。而另外也有一些較新的解決方法,例如 https://polyfill.io/v3/ 使用api request查找環境是否需使用polyfill,但由於我還沒有試過,所以不作評論。

萬惡的IE

萬惡的IE

希望大家在遭還瀏覽器Gank時,可以使用polyfill迎刃而解~

參考

  • https://developer.mozilla.org/en-US/docs/Glossary/Polyfill
  • https://remysharp.com/2010/10/08/what-is-a-polyfill

上一篇

macbook-pro(retina) late2012 換電池記錄

下一篇

關於我


Alex Ian
Alex Ian

ReactJS, VueJS 畫畫/寫作/前端開發

Alex Ian
Alex Ian

ReactJS, VueJS 畫畫/寫作/前端開發


共29篇文章
文章分類
  • 前端開發14
  • JavaScript7
  • 那些前端開發應該要知道的小事5
  • Gatsby.js3
  • ChromeExtension2
  • NetlifyCMS2
  • 生產力工具2
  • 關於我1
  • 非Coding1
  • Svelte1
  • raycast1
  • toolRecommend1
  • productivity1
  • MutationObserver1
  • observer pattern1
  • 開發效率1
  • will-change1
  • GitHubCopilot1
  • 生產力1
  • ChatGPT1
  • AI1
  • Copilot1
  • WebAssembly1
  • SEO1
  • GoogleSearchConsole1
  • react1
  • applescript1
  • 閱讀1
  • css1
  • grid1
  • micro-frontend1

Build with GatsbyJS and React 18.2.0. Hosted on Netlify.

The original code is open source and available at calpa/gatsby-starter-calpa-blog

Copyright ©AlexIan's blog 2025.

  1. 從頭開始上架 Chrome extension

    上回提到我們在本地端建好一個開發版本的 Chrome …
  2. Gatsby 部落格更新記錄 1.0

    首先把 Blog 連結貼在最前面:https://alex-ian.me/ 許多工程師 …
  3. Debounce & Throttle - 那些前端開發應該要知道的小事(一)

    前言 也許一開始接觸前端開發的新手們,都有使 …
  4. 使用 GitHub Copilot 一個月心得

    後悔自己為何沒有早點課金 在 Modern Web Conference 2023 觀後感 …
  5. 什麼是 Headless CMS?以探索 Netlify CMS 為例

    小弟的部落格使用 Gatsby.js 框架來架設,作為一個靜 …
  6. Modern Web Conference 2023 觀後感

    https://modernweb.tw/ 前言 Modern Web Conference (MWC) 作為每年度經典的網頁開 …
  7. 什麼是語法糖(Syntactic sugar)? - 2024 你要知道的 JS 語法糖 🍭

    語法糖能吃嗎? 在算數學時,不知道你什麼時候開 …
  8. 閉包 - 那些前端開發應該要知道的小事(三)

    前言 開始這個系列的原因,是因為雖然在程式中 …
  9. Raycast — Mac 提升工作效率的啟動工具

    Mac 的使用者,應該對 Spotlight 這個系統預設的啟動工具 …
  10. 使用 Notion 管理我的年度目標 暨 2023 回顧 & 2024 展望

    都進入 2024 才來展望 想要成為流量的奴隸,自然要 …
  11. 慢半拍來初嚐 Svelte

    Svelte 都出來兩年多的框架現在才來玩,有夠慢半拍 …
  12. 從頭開始學習開發 Chrome extension (v3 版本)

    Chrome extension 經歷過 v1, v2 後,來到了 v3,雖然曾小量接觸 v2 …
  13. 留言簿

    歡迎留言
  14. addEventListener的第三個參數 - 那些前端開發應該要知道的小事(二)

    前言 開始這個系列的原因,是因為雖然在程式中 …
  15. 在中大型企業下微前端的實現與挑戰

    我們先聊工程面,人的部分先不要 小弟任職前端 …
  16. will-change — 那些前端開發應該要知道的小事(七)

    你要做動畫你要先說啊 前端開發少不免會需要 …
  17. 關於我

    關於我 我是Alex Ian,是個小小的前端工程師,出來工 …
  18. 開發效率提升 - 操作鍵盤 & 快捷鍵篇

    我國中的電腦課,會教導學生倉頡和速成輸入法 …
  19. macbook-pro(retina) late2012 換電池記錄

    這篇文章其實與Coding無關,主要是記錄mbp換電池的 …
  20. polyfill是什麼?

    人在江湖,身不由己,在接案的過程中,總有一些你 …
所有結果