HTML5初學指南：IE版本太老不支持？用Polyfill！

網路在快速發展中，新的框架、工具甚至語言來來去去。然而，許多程序員不得不將速度調整到和最慢更新的用戶一樣快。

新瀏覽器在後台自動更新，不需要許可，並且在新的API方面正在實現跨越式發展。然而即使現代瀏覽器也在不同的時間實現不同的功能，即便你認為是潮流的功能在幾年之後未必還是潮流。

如果對所有網友進行調查，很可能現在還有用戶在使用IE9，你可以選擇繼續編代碼，或者將所有內容委託給jQuery或一些框架？ 這裡還有一個不錯的選擇讓程序員永遠不需要在糾結於瀏覽器版本：polyfill。

Polyfill是什麼？為什麼需要它？

Remy Sharp在2009年的書和博客中創造了這個詞。如果瀏覽器中存在該功能，則polyfill會讓瀏覽器執行其操作，如果沒有，則擴展單元會插入缺少的功能。polyfill填補了舊版瀏覽器的漏洞，對於缺少的功能，它可以使用非本地代碼複製本機API。

2009年，ECMAScript第五版登陸，這是語言的一大進步。ECMAScript 2015發布了類似的更新。展望未來，對語言的改進將是增量的，每年都至少發生一次。新的功能不斷進入編程語言，除了核心語言本身，還有DOM和Web平台的各種API。

為了突出顯示現代和舊版瀏覽器之間的差異，如果是最新的Chrome版本與Internet Explorer 9比較（某些公司仍然不滿意地支持），你會發現，IE9甚至IE11對ECMAScript 6的支持幾乎為零。

程序員在編碼的時候有沒有想過代碼需要什麼？代碼可能需要閃亮的新語法，並吐出純樸的老式ECMAScript 5。如果想在代碼中使用非同步/等待、擴展參數、類等，則需要將ES6代碼轉換為ES5，這時候可以試試Babel，這個號稱下一代?JavaScript 的語法編譯器。

但是，程序員不能填充JavaScript語法。雖然Babel可以將部分功能轉換為常規功能，但Polyfill將為全局範圍和本機原型添加方法。Babel提供自己的ES6 polyfill，用Babel網站的話來說是提供「內置的Promise或WeakMap」，靜態方法如Array.from orObject.assign，實例方法如Array.prototype.includes和生成器函數。 」

所以polyfill就足以提供所有ES6功能，也許你使用classList API添加和刪除類，或者使用matchMedia進行媒體查詢，但是仍然使用IE9。這裡還有一個很棒的服務，可以促使你選擇polyfill。

Polyfill.io是「Financial Times」開發的開源計劃。它目前每天可收到多達2.04億個請求，並將其描述為「一個規範的聚合庫」。這種Polyfills-on-demand交付系統使程序員能夠仔細閱讀說明並決定是否使用。

理想情況下，程序員將實際需要的多重填充功能發送給特定瀏覽器，並且只發送特定瀏覽器實際需要的Polyfill。Polyfill.io可以實現這兩個需求，該服務不會向新版瀏覽器傳遞過多支持，而是讀取User-Agent HTTP頭，以便它只能傳遞必要內容。新版瀏覽器將收到幾乎空的文件，舊版本的IE則將收到一個巨大的代碼包。

程序員可以通過查詢字元串中指定要使用的功能列表來減輕傳遞給舊機器的代碼重量。如果省略，將使用一組默認值。使用該服務一定要查看HTTP請求，但它的易用性是值得肯定的。

Polyfill.io非常全面，它包括一些流行的瀏覽器API，如Fetch和Promises。但API遠遠不足以滿足程序員的需求，Polyfill目前還存在許多待填充的新興API，如果程序員感興趣，不妨加入到其中，一起來完善這個不錯的項目吧。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！