閱讀(1.5k) 書簽贊(0) 我要糾錯

Javascript Polyfill 和轉(zhuǎn)譯器

2023-02-17 10:38 更新

JavaScript 語言在穩(wěn)步發(fā)展。也會定期出現(xiàn)一些對語言的新提議，它們會被分析討論，如果認為有價值，就會被加入到 https://tc39.github.io/ecma262/ 的列表中，然后被加到規(guī)范中。

JavaScript 引擎背后的團隊關于首先要實現(xiàn)什么有著他們自己想法。他們可能會決定執(zhí)行草案中的建議，并推遲已經(jīng)在規(guī)范中的內(nèi)容，因為它們不太有趣或者難以實現(xiàn)。

因此，一個 JavaScript 引擎只能實現(xiàn)標準中的一部分是很常見的情況。

查看語言特性的當前支持狀態(tài)的一個很好的頁面是 https://kangax.github.io/compat-table/es6/（它很大，我們現(xiàn)在還有很多東西要學）。

作為程序員，我們希望使用最新的特性。好東西越多越好！

另一方面，如何讓我們現(xiàn)代的代碼在還不支持最新特性的舊引擎上工作？

有兩個工作可以做到這一點：

轉(zhuǎn)譯器（Transpilers）。
墊片（Polyfills）。

通過本文，我們一起了解它們的工作原理以及它們在 Web 開發(fā)中的位置。

轉(zhuǎn)譯器（Transpilers）

轉(zhuǎn)譯器是一種可以將源碼轉(zhuǎn)譯成另一種源碼的特殊的軟件。它可以解析（“閱讀和理解”）現(xiàn)代代碼，并使用舊的語法結構對其進行重寫，進而使其也可以在舊的引擎中工作。

例如，在 ES2020 之前沒有“空值合并運算符” ??。所以，如果訪問者使用過時了的瀏覽器訪問我們的網(wǎng)頁，那么該瀏覽器可能就不明白 height = height ?? 100 這段代碼的含義。

轉(zhuǎn)譯器會分析我們的代碼，并將 height ?? 100 重寫為 (height !== undefined && height !== null) ? height : 100。

// 在運行轉(zhuǎn)譯器之前
height = height ?? 100;

// 在運行轉(zhuǎn)譯器之后
height = (height !== undefined && height !== null) ? height : 100;

現(xiàn)在，重寫了的代碼適用于更舊版本的 JavaScript 引擎。

通常，開發(fā)者會在自己的計算機上運行轉(zhuǎn)譯器，然后將轉(zhuǎn)譯后的代碼部署到服務器。

說到名字，Babel 是最著名的轉(zhuǎn)譯器之一。

現(xiàn)代項目構建系統(tǒng)，例如 webpack，提供了在每次代碼更改時自動運行轉(zhuǎn)譯器的方法，因此很容易將代碼轉(zhuǎn)譯集成到開發(fā)過程中。

墊片（Polyfills）

新的語言特性可能不僅包括語法結構和運算符，還可能包括內(nèi)建函數(shù)。

例如，?Math.trunc(n)? 是一個“截斷”數(shù)字小數(shù)部分的函數(shù)，例如 ?Math.trunc(1.23)? 返回 ?1?。

在一些（非常過時的）JavaScript 引擎中沒有 ?Math.trunc? 函數(shù)，所以這樣的代碼會執(zhí)行失敗。

由于我們談論的是新函數(shù)，而不是語法更改，因此無需在此處轉(zhuǎn)譯任何內(nèi)容。我們只需要聲明缺失的函數(shù)。

更新/添加新函數(shù)的腳本被稱為“polyfill”。它“填補”了空白并添加了缺失的實現(xiàn)。

對于這種特殊情況，?Math.trunc? 的 polyfill 是一個實現(xiàn)它的腳本，如下所示：

if (!Math.trunc) { // 如果沒有這個函數(shù)
  // 實現(xiàn)它
  Math.trunc = function(number) {
    // Math.ceil 和 Math.floor 甚至存在于上古年代的 JavaScript 引擎中
    // 在本教程的后續(xù)章節(jié)中會講到它們
    return number < 0 ? Math.ceil(number) : Math.floor(number);
  };
}

JavaScript 是一種高度動態(tài)的語言。腳本可以添加/修改任何函數(shù)，甚至包括內(nèi)建函數(shù)。

兩個有趣的 polyfill 庫：