了解JavaScript中的ES模塊
本文轉(zhuǎn)載自微信公眾號「新鈦云服」，作者方章和 翻譯 。轉(zhuǎn)載本文請聯(lián)系新鈦云服公眾號。
模塊在每個編程語言中都能找到。它是一種能在一個代碼塊中引入另一個代碼的模塊功能的方法。這些模塊是開發(fā)人員開發(fā)的具有特定功能的代碼，可以在項(xiàng)目其他地方重復(fù)使用。模塊化為你提供了一些好處，比如代碼的可復(fù)用性和模塊化。
如果你之前一直在使用JavaScript開發(fā)代碼，你就會知道早期的JavaScript沒有這樣的模塊功能。開發(fā)者為了將js文件加載到他們的頁面中，不得不使用HTML <script>標(biāo)簽。直到后來，幾種模塊定義規(guī)范才開始出現(xiàn)。
- CommonJS — Node.js中使用的module.export和require語法
- Asynchronous Module Definition (AMD)
- Universal Module Definition (UMD)
- ES Modules
首先，我們先來看下為什么需要這些模塊化定義的規(guī)范
為什么我們需要模塊化
每當(dāng)你思考程序是如何工作的，其實(shí)它們所做的就是變量管理。它為變量賦值，修改變量，將兩個變量組合在一起等等。但是當(dāng)變量的數(shù)量隨著你的應(yīng)用程序的規(guī)模而增加時，你會發(fā)現(xiàn)你的代碼管理起來會非常麻煩。
解決這個問題的方法是只需要考慮幾個變量。JavaScript實(shí)現(xiàn)這一目標(biāo)的方式被稱為作用域。由于JavaScript中的作用域定義方式導(dǎo)致函數(shù)不能訪問其他函數(shù)中定義的變量。雖然這使得你的變量不能被其他函數(shù)訪問，但這又引起了另一個問題--你很難在不同函數(shù)之間共享變量。解決這個問題就是將它們定義在全局作用域上。
雖然這種方法可以解決問題，但并不推薦。你的腳本標(biāo)簽應(yīng)該按照正確的順序，你必須確保沒有人改變這個順序。如果順序確實(shí)發(fā)生了變化，你的應(yīng)用程序?qū)伋鲆粋€錯誤。這使得代碼管理變得很棘手。你永遠(yuǎn)不知道什么會破壞什么。任何函數(shù)都可以訪問，所以你不知道哪些函數(shù)依賴于哪些腳本。
另一個問題是，在該全局范圍內(nèi)的每一部分代碼都可以被其它代碼改變。這將允許惡意的和非惡意的代碼訪問甚至修改你的全局變量，無論是否有惡意。
所以需要引入模塊來幫助克服這些問題。
模塊化是如何優(yōu)雅的解決這個問題的
模塊可以讓你更好地組織和管理變量和函數(shù)。通常情況下，屬于同一功能的函數(shù)和變量會被放在一個模塊中。這就把這些變量放到了模塊作用域中。模塊作用域可以用來在模塊中的函數(shù)之間共享變量。
這也使得變量也可以為其他模塊所用。他們可以明確的說哪些變量、類或函數(shù)應(yīng)該對外部模塊可用。這就是所謂的導(dǎo)出。一旦你有了一個導(dǎo)出，其他模塊就可以明確地說它們依賴于該變量、類或函數(shù)。由于這種明確的關(guān)系，你將知道如果你刪除一個模塊，哪些模塊將被破壞。
一旦你能夠?qū)牒蛯?dǎo)出變量和函數(shù)，你就可以更容易地將你的代碼分割和分解成可以獨(dú)立工作的代碼塊。你以后可以通過使用這些模塊來構(gòu)建你的應(yīng)用程序，類似于用樂高積木來構(gòu)建。
為了實(shí)現(xiàn)這個超級有用的功能，已經(jīng)多次嘗試用JavaScript添加模塊功能。
現(xiàn)有的模塊化系統(tǒng)
CommonJS
CommonJS是NodeJS一直在使用的。使用Node，你會得到CommonJS的module.exports和require并可以直接使用。但是，與Node不同的是，瀏覽器并不支持CommonJS。此外，CommonJS會同步加載模塊，因此對于瀏覽器來說，它不是一個最佳的解決方案。你可以使用Webpack或Browserify等打包程序來解決這個問題。
- // filename: bar.js
- // dependencies
- var $ = require('jquery');
- // methods
- function myFunction(){};
- // exposed public method (single)
- module.exports = myFunction;
Asynchronous Module Definition (AMD)
AMD誕生于一群不喜歡CommonJS發(fā)展方向的開發(fā)者。事實(shí)上，AMD在發(fā)展初期就從CommonJS中分裂出來了。AMD和CommonJS的主要區(qū)別在于AMD是異步加載模塊的。這在瀏覽器中非常受歡迎，因?yàn)閱訒r間對于良好的用戶體驗(yàn)至關(guān)重要。
- // filename: bar.js
- define(['jquery'], function ($) {
- // methods
- function myFunction(){};
- // exposed public methods
- return myFunction;
- });
由于CommonJS和AMD在各自的領(lǐng)域相當(dāng)流行，所以需要一個 "通用 "的模式來支持兩種風(fēng)格。但事實(shí)證明，UMD又亂又丑。雖然它確實(shí)同時支持AMD和CommonJS，也支持老式的 "全局 "變量定義。
Universal Module Definition (UMD)
什么是ES模塊
眾所周知，JavaScript缺乏一個標(biāo)準(zhǔn)模塊定義規(guī)范。因此，在ES6中提出了一個單一的、原生的模塊標(biāo)準(zhǔn)。import和export指令允許程序在不運(yùn)行代碼的情況下導(dǎo)入導(dǎo)出，從而建立一個完整的模塊依賴關(guān)系。
其語法格式還是簡單好用的，并且兼容瀏覽器中的同步和異步操作模式。ES模塊在瀏覽器中很快就可以使用，但在Node.js中，要想出一個向后兼容并能實(shí)現(xiàn)增量升級的解決方案就有點(diǎn)難了。在Node.js中，原生的ES模塊在實(shí)驗(yàn)性模塊標(biāo)志后面長期可用。
下面以ES6模塊為例。
JavaScript
- //------ library.js ------
- export const sqrt = Math.sqrt;
- export function square(x) {
- return x * x;
- }
- export function diagonal(x, y) {
- return sqrt(square(x) + square(y));
- }
- //------ main.js ------
- import { square, diagonal } from 'library';
- console.log(square(13)); // 169
- console.log(diagonal(12, 5)); // 13
- const app = document.getElementById("app");
- app.innerHTML = "<h1>Demo App for ES Modules</h1>";
- const input = document.getElementById("num");
- input.addEventListener("change",displaySquare);
- function displaySquare(){
- var sqrOutput = document.getElementById("sqr");
- sqrOutput.value = square(input.value);
- }
HTML
- <HTML>
- <head>
- <title>ES Modules Demo</title>
- </head>
- <body>
- <script type="module" src="./main.js" ></script>
- <div id="app"></div>
- <label>Input</label>
- <input id="num" type="number" placeholder="Enter number here"/>
- <br>
- <label>Output</label>
- <input id="sqr" type="number" disabled style="margin- top:20px"/>
- </body>
- </HTML>
如上圖所示，在HTML文件中，你需要在腳本標(biāo)簽中指定type="模塊"，瀏覽器才會將其視為ECMAScript模塊。
兼容性
為了向后兼容，你可以在腳本標(biāo)簽中包含nomodule（其中加載的JS文件是單個打包文件）。支持ES模塊的瀏覽器會知道忽略這一點(diǎn)。這個解決方案即使在最老的瀏覽器中也能使用。Willem的回答已經(jīng)很好的解釋了這個問題。
在上面的方案中，我們會在HTML中加入這樣的內(nèi)容。
- <script type="module" src="./main.js" >
- </script>
- <script nomodule src="./fallback.js" >
- </script>
如果你是在本地測試，你將需要在服務(wù)器上運(yùn)行這個，因?yàn)槟銜龅紺ORS問題。請?jiān)谶@里閱讀更多信息。模塊以絕對或相對引用導(dǎo)入，必須以"/"、"./"或"./"開頭。
注意：
動態(tài)導(dǎo)入
最新的ES2020版本確實(shí)帶有動態(tài)導(dǎo)入功能。要動態(tài)導(dǎo)入模塊，導(dǎo)入關(guān)鍵字可以作為函數(shù)調(diào)用。當(dāng)以這種方式使用時，它會返回一個promise。
- import('/modules/library.js')
- .then((module) => {
- // Do something with the module.
- });
- //or using await
- let module = await import('/modules/library.js');
關(guān)于es模塊的詳細(xì)兼容性可以參考這里 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#import以及https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#export
您是否應(yīng)該選擇使用ES模塊？
對于瀏覽器來說，ES模塊是新的標(biāo)準(zhǔn)?？梢蚤_箱即用的異步模塊加載功能，你可以獲得更快的啟動時間以更好的性能。雖然您可以在瀏覽器中使用CommonJS與一些額外的插件，但強(qiáng)烈建議您切換到ES模塊，因?yàn)樗鼈兪菫g覽器中的原生模塊。
ES原生模塊允許您獲得單個模塊的加載，而不是單個打包文件。這是相當(dāng)有用的，它減少了加載數(shù)據(jù)的大小。瀏覽器對原生模塊的兼容性也很重要，因?yàn)樗鼪Q定了原生的ES模塊是否會被實(shí)現(xiàn)，或者我們是否會回退到我們的模式，它將加載一個單一的文件。當(dāng)你得到一個單一的bundle文件時，其中一個問題是，當(dāng)你的應(yīng)用程序變得更大時，bundle js文件的大小也會增加，從而影響啟動時間和性能。你可以通過使用代碼拆分來避免這個問題，這是現(xiàn)代打包器（如webpack）中的一個功能。但在某些情況下，我們可能會選擇模塊打包器，如webpack而不是ES模塊。如果你有CSS、圖像、字體等資產(chǎn)，甚至是XML、CSV等數(shù)據(jù)文件，你可能會選擇webpack解決方案，因?yàn)閣ebpack提供了文件打包功能。
你還應(yīng)該考慮到瀏覽器對HTTP2的支持。當(dāng)你使用本地模塊時，你的瀏覽器會單獨(dú)加載這些模塊。但在HTTP2的幫助下，我們可以用一個連接同時服務(wù)多個請求，而不是發(fā)送多個HTTP請求。根據(jù)CanIUse的數(shù)據(jù)，96.49%的瀏覽器使用HTTP2。
但是當(dāng)你開發(fā)一個應(yīng)用程序時，即使是剩下的3.51%也應(yīng)該滿足，那么你可能會想改用webpack。這是因?yàn)槿绻銏?jiān)持使用原生的ES模塊，你的應(yīng)用程序?qū)⑿枰l(fā)送幾個HTTP請求來加載每個單獨(dú)的模塊。
在Node中，情況就完全不同了。由于該功能仍被標(biāo)記為實(shí)驗(yàn)性的，所以你最好堅(jiān)持使用CommonJS。不過你還是可以嘗試一下ES模塊。你可以在這里查看上面例子的源代碼。你也可以在這里查看實(shí)時演示。我希望你明白什么是ES模塊，以及為什么需要它們。
