更輕鬆使用自動補完函式庫 (Polyfill)

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

unicorn

打個比方,一匹普通的馬裝上自動補完函式庫就成了獨角獸。

難題

我們想要解決的幾個問題:

  • 開發者不一定知道需補完哪項功能。往往是一堆使用者照樣沿用舊版 IE 載入網站之後,才發現整個網站根本沒用。這時輪到你開始除錯,設法找出是哪項功能出了問題。問題起源有時明顯好找,但大多數情況下都很難發現;而且舊版瀏覽器也往往缺乏新的開發者工具。
  • 每一種功能往往有多個補完函式庫可用,但不容易知道哪個函式庫可達到最佳效益。
  • 某些補完函式庫需搭配開發者用不到的一堆函式庫,才能提供完整的功能集 (如 ES6)。若需要修正某些很簡單的東西,應該不用將這些程式碼全數加入瀏覽器。
  • 較新版的瀏覽器可能不需要補完函式庫,但一般補完函式庫可用於所有瀏覽器。若只為了要改善舊版瀏覽器的相容性,卻會影響新版瀏覽器的效能。我們不想因此對效能妥協。只有在瀏覽器缺乏某項功能的原生實作時,我們才會提供補完函式庫。

我們的解決方案:自動補完函式庫當做一項服務

為了解決這些問題,我們建立了補完函式庫的服務。這個概念有點像驗光。先檢查你的眼睛,再針對視力問題配付合適的眼鏡。我們對瀏覽器執行類似的流程:

  1. 開發者先在自己的頁面中插入指令碼標籤 <script>用來載入並執行此補完函式庫服務。
  2. 該服務將分析瀏覽器的「user-agent」標頭,以及所需功能的清單 (或使用可補完的所有事項預設清單),再列出此瀏覽器所需的補完函式庫清單。
  3. 補完函式庫將透過拓撲排序,以根據相依性的次序完成排列。
  4. 將此套件最小化並透過 CDN 提供 (感謝 Fastly 的支援)。

我們真的需要這種解決方案嗎?看看「Modernizr」這個功能偵測大福袋是如何使用的吧!一般合理的情況都能透過自訂的 Modernizr 套件包解決。但是絕大部分的 Modernizr 使用者只用了預設版本,通常取自於 cdnjs.com 或 html5boilerplate 的一部分。如果你根本用不到 Modernizr 的功能偵測,又何必把整個東西裝進來呢?或許你誤解了函式庫的功能,也把 Modernizr 當做只是「修理工具」?我必須承認,第一次聽到這個函式庫的名稱時就是這樣想。而且當我發現 Modernizr 只是用來偵測瀏覽器功能的新舊,而非真正補強整個瀏覽器所缺乏的功能時,心裡很是失望。

從另一個方面來看,補完函式庫的服務其實就是修理工具。如果你不想耗時間只是初步了解舊款瀏覽器的小缺點,那也情有可原。只要讓其他人找出這些小缺點,則我們不需又耗時費力去了解細節,就能承接前人的工作成果也不錯。

 

看到這裡,你是否對自動補完函式庫感興趣呢?可參閱原文內所提供的程式碼進一步了解!

 

 

原文連結:An easier way of using polyfills

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *