前端“黑話”polyfill

NO IMAGE

前言
Web前端開發這個日新月異的時代,總是需要閱讀一些最新的英文技術部落格來跟上技術的發展的潮流。而有時候會遇到一些比較高頻的“黑話”,在社群裡面可能已經是人人皆知的“共同語言”,而你接觸的少就偏偏看不懂。就像現在幾乎所有中國人都知道duang是什麼東西,但是一個剛學中文的外國人看到以後可能就一頭霧水。

圖片描述

黑話也是要學習的,本文收集各種Web開發的黑話。這裡先介紹兩個。

Polyfill
Polyfill或者Polyfiller,是英國Web開發者 Remy Sharp 在咖啡店蹲坑的時候拍腦袋造出來的。當時他想用一個詞來形容”用JavaScript(或者Flash之類的什麼鬼)來實現一些瀏覽器不支援的原生API”。Shim這個已經有的詞彙第一時間出現在他的腦海裡。但是他回頭想了一下Shim一般有自己的API,而不是單純實現原生不支援的API。苦思冥想一直想不到合適的單詞,於是他一怒之下造了一個單詞Polyfill。除了他自己用這個詞以外,他還給其他開發者用。隨著他在各種Web會議演講和他寫的書《Introducing HTML5》中頻繁提到這個詞,大家用了都覺得很好,就一起來用。

Polyfill的準確意思為:用於實現瀏覽器並不支援的原生API的程式碼。

例如,querySelectorAll是很多現代瀏覽器都支援的原生Web API,但是有些古老的瀏覽器並不支援,那麼假設有人寫了庫,只要用了這個庫, 你就可以在古老的瀏覽器裡面使用document.querySelectorAll,使用方法跟現代瀏覽器原生API無異。那麼這個庫就可以稱為Polyfill或者Polyfiller。
好,那麼問題就來了。jQuery是不是一個Polyfill?答案是No。因為它並不是實現一些標準的原生API,而是封裝了自己API。一個Polyfill是抹平新老瀏覽器 標準原生API 之間的差距的一種封裝,而不是實現自己的API。
已有的一些Polyfill,如 Polymer 是讓舊的瀏覽器也能用上 HTML5 Web Component 的一個Polyfill。FlashCanvas是用Flash實現的可以讓不支援Canvas API的瀏覽器也能用上Canvas的Polyfill。

Shim和Polyfill
在JavaScript的世界裡,有兩個詞經常被提到,shim和polyfill.它們指的都是什麼,又有什麼區別?

一個shim是一個庫,它將一個新的API引入到一箇舊的環境中,而且僅靠舊環境中已有的手段實現。

一個polyfill就是一個用在瀏覽器API上的shim.我們通常的做法是先檢查當前瀏覽器是否支援某個API,如果不支援的話就載入對應的polyfill.然後新舊瀏覽器就都可以使用這個API了.術語polyfill來自於一個家裝產品Polyfilla:
Polyfilla是一個英國產品,在美國稱之為Spackling Paste(譯者注:刮牆的,在中國稱為膩子).

記住這一點就行:把舊的瀏覽器想象成為一面有了裂縫的牆.這些[polyfills]會幫助我們把這面牆的裂縫抹平,還我們一個更好的光滑的牆壁(瀏覽器)

Paul Irish釋出過一個Polyfills的總結頁面“HTML5 Cross Browser Polyfills”.es5-shim是一個shim(而不是polyfill)的例子,它在ECMAScript 3的引擎上實現了ECMAScript 5的新特性,而且在Node.js上和在瀏覽器上有完全相同的表現(譯者注:因為它能在Node.js上使用,不光瀏覽器上,所以它不是polyfill).