溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何理解JavaScript中的ES模塊

發(fā)布時(shí)間：2021-09-30 15:51:19 來源：億速云 閱讀：105 作者：柒染 欄目：web開發(fā)

如何理解JavaScript中的ES模塊，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

模塊在每個(gè)編程語言中都能找到。它是一種能在一個(gè)代碼塊中引入另一個(gè)代碼的模塊功能的方法。這些模塊是開發(fā)人員開發(fā)的具有特定功能的代碼，可以在項(xiàng)目其他地方重復(fù)使用。模塊化為你提供了一些好處，比如代碼的可復(fù)用性和模塊化。

如果你之前一直在使用JavaScript開發(fā)代碼，你就會(huì)知道早期的JavaScript沒有這樣的模塊功能。開發(fā)者為了將js文件加載到他們的頁面中，不得不使用HTML <script>標(biāo)簽。直到后來，幾種模塊定義規(guī)范才開始出現(xiàn)。

  • CommonJS &mdash; Node.js中使用的module.export和require語法

  • Asynchronous Module Definition (AMD)

  • Universal Module Definition (UMD)

  • ES Modules

首先，我們先來看下為什么需要這些模塊化定義的規(guī)范

為什么我們需要模塊化

每當(dāng)你思考程序是如何工作的，其實(shí)它們所做的就是變量管理。它為變量賦值，修改變量，將兩個(gè)變量組合在一起等等。但是當(dāng)變量的數(shù)量隨著你的應(yīng)用程序的規(guī)模而增加時(shí)，你會(huì)發(fā)現(xiàn)你的代碼管理起來會(huì)非常麻煩。

解決這個(gè)問題的方法是只需要考慮幾個(gè)變量。JavaScript實(shí)現(xiàn)這一目標(biāo)的方式被稱為作用域。由于JavaScript中的作用域定義方式導(dǎo)致函數(shù)不能訪問其他函數(shù)中定義的變量。雖然這使得你的變量不能被其他函數(shù)訪問，但這又引起了另一個(gè)問題--你很難在不同函數(shù)之間共享變量。解決這個(gè)問題就是將它們定義在全局作用域上。

雖然這種方法可以解決問題，但并不推薦。你的腳本標(biāo)簽應(yīng)該按照正確的順序，你必須確保沒有人改變這個(gè)順序。如果順序確實(shí)發(fā)生了變化，你的應(yīng)用程序?qū)伋鲆粋€(gè)錯(cuò)誤。這使得代碼管理變得很棘手。你永遠(yuǎn)不知道什么會(huì)破壞什么。任何函數(shù)都可以訪問，所以你不知道哪些函數(shù)依賴于哪些腳本。

另一個(gè)問題是，在該全局范圍內(nèi)的每一部分代碼都可以被其它代碼改變。這將允許惡意的和非惡意的代碼訪問甚至修改你的全局變量，無論是否有惡意。

所以需要引入模塊來幫助克服這些問題。

模塊化是如何優(yōu)雅的解決這個(gè)問題的

模塊可以讓你更好地組織和管理變量和函數(shù)。通常情況下，屬于同一功能的函數(shù)和變量會(huì)被放在一個(gè)模塊中。這就把這些變量放到了模塊作用域中。模塊作用域可以用來在模塊中的函數(shù)之間共享變量。

這也使得變量也可以為其他模塊所用。他們可以明確的說哪些變量、類或函數(shù)應(yīng)該對(duì)外部模塊可用。這就是所謂的導(dǎo)出。一旦你有了一個(gè)導(dǎo)出，其他模塊就可以明確地說它們依賴于該變量、類或函數(shù)。由于這種明確的關(guān)系，你將知道如果你刪除一個(gè)模塊，哪些模塊將被破壞。

一旦你能夠?qū)牒蛯?dǎo)出變量和函數(shù)，你就可以更容易地將你的代碼分割和分解成可以獨(dú)立工作的代碼塊。你以后可以通過使用這些模塊來構(gòu)建你的應(yīng)用程序，類似于用樂高積木來構(gòu)建。

為了實(shí)現(xiàn)這個(gè)超級(jí)有用的功能，已經(jīng)多次嘗試用JavaScript添加模塊功能。

現(xiàn)有的模塊化系統(tǒng)

CommonJS

CommonJS是NodeJS一直在使用的。使用Node，你會(huì)得到CommonJS的module.exports和require并可以直接使用。但是，與Node不同的是，瀏覽器并不支持CommonJS。此外，CommonJS會(huì)同步加載模塊，因此對(duì)于瀏覽器來說，它不是一個(gè)最佳的解決方案。你可以使用Webpack或Browserify等打包程序來解決這個(gè)問題。

//   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)閱?dòng)時(shí)間對(duì)于良好的用戶體驗(yàn)至關(guān)重要。

//   filename: bar.js define(['jquery'], function ($) {    //   methods    function myFunction(){};     //   exposed public methods    return myFunction; });

由于CommonJS和AMD在各自的領(lǐng)域相當(dāng)流行，所以需要一個(gè) "通用 "的模式來支持兩種風(fēng)格。但事實(shí)證明，UMD又亂又丑。雖然它確實(shí)同時(shí)支持AMD和CommonJS，也支持老式的 "全局 "變量定義。

Universal Module Definition (UMD)

什么是ES模塊

眾所周知，JavaScript缺乏一個(gè)標(biāo)準(zhǔn)模塊定義規(guī)范。因此，在ES6中提出了一個(gè)單一的、原生的模塊標(biāo)準(zhǔn)。import和export指令允許程序在不運(yùn)行代碼的情況下導(dǎo)入導(dǎo)出，從而建立一個(gè)完整的模塊依賴關(guān)系。

其語法格式還是簡單好用的，并且兼容瀏覽器中的同步和異步操作模式。ES模塊在瀏覽器中很快就可以使用，但在Node.js中，要想出一個(gè)向后兼容并能實(shí)現(xiàn)增量升級(jí)的解決方案就有點(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 = "<h2>Demo App for ES Modules</h2>"; 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="模塊"，瀏覽器才會(huì)將其視為ECMAScript模塊。

兼容性

為了向后兼容，你可以在腳本標(biāo)簽中包含nomodule（其中加載的JS文件是單個(gè)打包文件）。支持ES模塊的瀏覽器會(huì)知道忽略這一點(diǎn)。這個(gè)解決方案即使在最老的瀏覽器中也能使用。Willem的回答已經(jīng)很好的解釋了這個(gè)問題。

在上面的方案中，我們會(huì)在HTML中加入這樣的內(nèi)容。

<script type="module" src="./main.js" > </script> <script nomodule src="./fallback.js" > </script>

如果你是在本地測(cè)試，你將需要在服務(wù)器上運(yùn)行這個(gè)，因?yàn)槟銜?huì)遇到CORS問題。請(qǐng)?jiān)谶@里閱讀更多信息。模塊以絕對(duì)或相對(duì)引用導(dǎo)入，必須以"/"、"./"或"./"開頭。

注意：

動(dòng)態(tài)導(dǎo)入

最新的ES2020版本確實(shí)帶有動(dòng)態(tài)導(dǎo)入功能。要?jiǎng)討B(tài)導(dǎo)入模塊，導(dǎo)入關(guān)鍵字可以作為函數(shù)調(diào)用。當(dāng)以這種方式使用時(shí)，它會(huì)返回一個(gè)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模塊？

對(duì)于瀏覽器來說，ES模塊是新的標(biāo)準(zhǔn)。可以開箱即用的異步模塊加載功能，你可以獲得更快的啟動(dòng)時(shí)間以更好的性能。雖然您可以在瀏覽器中使用CommonJS與一些額外的插件，但強(qiáng)烈建議您切換到ES模塊，因?yàn)樗鼈兪菫g覽器中的原生模塊。

ES原生模塊允許您獲得單個(gè)模塊的加載，而不是單個(gè)打包文件。這是相當(dāng)有用的，它減少了加載數(shù)據(jù)的大小。瀏覽器對(duì)原生模塊的兼容性也很重要，因?yàn)樗鼪Q定了原生的ES模塊是否會(huì)被實(shí)現(xiàn)，或者我們是否會(huì)回退到我們的模式，它將加載一個(gè)單一的文件。當(dāng)你得到一個(gè)單一的bundle文件時(shí)，其中一個(gè)問題是，當(dāng)你的應(yīng)用程序變得更大時(shí)，bundle js文件的大小也會(huì)增加，從而影響啟動(dòng)時(shí)間和性能。你可以通過使用代碼拆分來避免這個(gè)問題，這是現(xiàn)代打包器（如webpack）中的一個(gè)功能。但在某些情況下，我們可能會(huì)選擇模塊打包器，如webpack而不是ES模塊。如果你有CSS、圖像、字體等資產(chǎn)，甚至是XML、CSV等數(shù)據(jù)文件，你可能會(huì)選擇webpack解決方案，因?yàn)閣ebpack提供了文件打包功能。

你還應(yīng)該考慮到瀏覽器對(duì)HTTP2的支持。當(dāng)你使用本地模塊時(shí)，你的瀏覽器會(huì)單獨(dú)加載這些模塊。但在HTTP2的幫助下，我們可以用一個(gè)連接同時(shí)服務(wù)多個(gè)請(qǐng)求，而不是發(fā)送多個(gè)HTTP請(qǐng)求。根據(jù)CanIUse的數(shù)據(jù)，96.49%的瀏覽器使用HTTP2。

但是當(dāng)你開發(fā)一個(gè)應(yīng)用程序時(shí)，即使是剩下的3.51%也應(yīng)該滿足，那么你可能會(huì)想改用webpack。這是因?yàn)槿绻銏?jiān)持使用原生的ES模塊，你的應(yīng)用程序?qū)⑿枰l(fā)送幾個(gè)HTTP請(qǐng)求來加載每個(gè)單獨(dú)的模塊。

在Node中，情況就完全不同了。由于該功能仍被標(biāo)記為實(shí)驗(yàn)性的，所以你最好堅(jiān)持使用CommonJS。不過你還是可以嘗試一下ES模塊。你可以在這里查看上面例子的源代碼。你也可以在這里查看實(shí)時(shí)演示。

關(guān)于如何理解JavaScript中的ES模塊問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手