自動補完函式庫 (即 Polyfill),是讓舊版瀏覽器也能支援新程式碼的絕妙方法。但目前 polyfill 的使用方式實屬不易,我們《金融時報 (Financial Times,FT)》則自行建構了新的服務,以期能更輕鬆的利用這類函式庫。希望你也能一同使用,並協助改善。

打個比方,一匹普通的馬裝上自動補完函式庫就成了獨角獸。
難題
我們想要解決的幾個問題:
- 開發者不一定知道需補完哪項功能。往往是一堆使用者照樣沿用舊版 IE 載入網站之後,才發現整個網站根本沒用。這時輪到你開始除錯,設法找出是哪項功能出了問題。問題起源有時明顯好找,但大多數情況下都很難發現;而且舊版瀏覽器也往往缺乏新的開發者工具。
- 每一種功能往往有多個補完函式庫可用,但不容易知道哪個函式庫可達到最佳效益。
- 某些補完函式庫需搭配開發者用不到的一堆函式庫,才能提供完整的功能集 (如 ES6)。若需要修正某些很簡單的東西,應該不用將這些程式碼全數加入瀏覽器。
- 較新版的瀏覽器可能不需要補完函式庫,但一般補完函式庫可用於所有瀏覽器。若只為了要改善舊版瀏覽器的相容性,卻會影響新版瀏覽器的效能。我們不想因此對效能妥協。只有在瀏覽器缺乏某項功能的原生實作時,我們才會提供補完函式庫。
我們的解決方案:自動補完函式庫當做一項服務
為了解決這些問題,我們建立了補完函式庫的服務。這個概念有點像驗光。先檢查你的眼睛,再針對視力問題配付合適的眼鏡。我們對瀏覽器執行類似的流程:
- 開發者先在自己的頁面中插入指令碼標籤 用來載入並執行此補完函式庫服務。
- 該服務將分析瀏覽器的「user-agent」標頭,以及所需功能的清單 (或使用可補完的所有事項預設清單),再列出此瀏覽器所需的補完函式庫清單。
- 補完函式庫將透過拓撲排序,以根據相依性的次序完成排列。
- 將此套件最小化並透過 CDN 提供 (感謝 Fastly 的支援)。
我們真的需要這種解決方案嗎?看看「Modernizr」這個功能偵測大福袋是如何使用的吧!一般合理的情況都能透過自訂的 Modernizr 套件包解決。但是絕大部分的 Modernizr 使用者只用了預設版本,通常取自於 cdnjs.com 或 html5boilerplate 的一部分。如果你根本用不到 Modernizr 的功能偵測,又何必把整個東西裝進來呢?或許你誤解了函式庫的功能,也把 Modernizr 當做只是「修理工具」?我必須承認,第一次聽到這個函式庫的名稱時就是這樣想。而且當我發現 Modernizr 只是用來偵測瀏覽器功能的新舊,而非真正補強整個瀏覽器所缺乏的功能時,心裡很是失望。
從另一個方面來看,補完函式庫的服務其實就是修理工具。如果你不想耗時間只是初步了解舊款瀏覽器的小缺點,那也情有可原。只要讓其他人找出這些小缺點,則我們不需又耗時費力去了解細節,就能承接前人的工作成果也不錯。
看到這裡,你是否對自動補完函式庫感興趣呢?可參閱原文內所提供的程式碼進一步了解!