說一說ES Modules是什么及ES Modules有什么用

今天來說一下關(guān)于ES Modules是什么及ES Modules有什么用這方面的一些訊息，不少朋友對于ES Modules是什么及ES Modules有什么用這方面的信息頗感興趣的。小編今天就為此整理一些相關(guān)的訊息，希望對有需要的朋友有所幫助。

ES Modules(ESM)是用于處理模塊的 ECMAScript 標(biāo)準(zhǔn)。 雖然 Node.js 長期使用 CommonJS 標(biāo)準(zhǔn)，但瀏覽器從未有過模塊系統(tǒng)。 每個主要決策(如模塊系統(tǒng))必須首先由 ECMAScript 標(biāo)準(zhǔn)化，然后由瀏覽器實施。

ES modules

這個標(biāo)準(zhǔn)化過程在 ES6 中完成，瀏覽器開始實施這個標(biāo)準(zhǔn)，試圖以相同的工作方式保持一致性，，現(xiàn)在 Chrome，Safari，Edge 和 Firefox(從 60 版本開始)支持 ES 模塊。

ES modules(ESM) 是 JavaScript 官方的標(biāo)準(zhǔn)化模塊系統(tǒng)。然而，它在標(biāo)準(zhǔn)化的道路上已經(jīng)花費了近 10 年的時間。

可喜的是，標(biāo)準(zhǔn)化之路馬上就要完成了。等到 2018 年 5 月 Firefox 60 發(fā)布之后，所有的主流瀏覽器就都支持 ESM 了。同時，Node 模塊工作小組也正在為 Node.js 添加 ESM 支持。為 WebAssembly 提供 ESM 集成的工作也正在如火如荼的進行。

許多 JS 開發(fā)者都知道，對 ESM 的討論從開始至今一直都沒停過。但是很少有人真正理解 ESM 的工作原理。

模塊到底解決了什么問題?

仔細想想，使用 JavaScript 編碼在于正確地管理變量，在于給變量賦值，或者給變量賦以數(shù)值或者合并兩個變量并把它們賦值給另外一個變量。

因為你的大多數(shù)代碼都是在更改變量，如何組織這些變量將會對你的編碼方式以及代碼的維護產(chǎn)生重大的影響。

當(dāng)一次只需要考慮幾個變量的時候使得事情變得非常簡單，JavaScript 有一個方式來幫助你實現(xiàn)這個目標(biāo)，那就是 —— 作用域。因為作用域的存在，函數(shù)不能訪問 定義在其他函數(shù)內(nèi)部的變量。

這很棒。這意味著當(dāng)你專注于實現(xiàn)一個函數(shù)的時候，你只需要專注于實現(xiàn)這個函數(shù)，而不需要擔(dān)心其他的函數(shù)會影響到你這個函數(shù)里的變量。

不過，它也有一個缺陷，它使得不同的函數(shù)之間共享變量變得更加困難。

那么假如你的確想要在作用域之外共享你的變量呢?通常的做法是將它放在當(dāng)前作用域之上，比如：全局作用域。

或許你還記得使用 jQuery 的那些日子，在你加載任何 jQuery 的插件之前，你必須確保 jQuery 已經(jīng)存在于全局作用域內(nèi)了。

這是可行的，但是會產(chǎn)生一些煩人的問題。

首先，你所有的 script 標(biāo)簽都必須放置于一個正確的順序。那么你就必須很小心并確保這些腳本之間不會互相影響。

如果你確實不小心搞亂了順序，那么在代碼運行的時候，你的應(yīng)用就會拋出異常。當(dāng)函數(shù)尋找 jQuery 對象的存在 —— 也就是全局作用域之下，但是卻找不到的時候，函數(shù)就會報錯并停止執(zhí)行。

這讓代碼維護變得棘手。移除舊的代碼或者是 script 標(biāo)簽就像是玩轉(zhuǎn)盤一樣。你無法預(yù)料到什么代碼可能崩潰。代碼之間的依賴關(guān)系變得隱蔽。任何函數(shù)都可以獲取到全局作用域上的任何東西，所以你并沒有辦法知道哪個函數(shù)依賴于哪個 script 標(biāo)簽。

其次，由于你的變量都存在于全局作用域上，所有處于這個作用域之上的代碼都可以改變這些變量。惡意代碼可以通過更改這些變量來讓你的代碼做并非你本意的事情，或者非惡意的代碼會不小心破壞你的變量。

模塊如何提供幫助

模塊為你提供了一個更加好的方式來組織這些變量和方法。有了模塊，你可以將這些有意義的函數(shù)和變量組織在一起。

模塊會將這些函數(shù)和變量放入一個模塊作用域當(dāng)中。模塊作用域使得模塊中的不同函數(shù)能夠共享這些變量。

但是不同與函數(shù)作用域，模塊作用域有一種方法能夠使得其他的模塊也可以訪問這個模塊的變量。他們可以顯式地指定模塊中的哪些變量，類或者是函數(shù)可以被其他模塊訪問。

當(dāng)一些東西對其他模塊可用的時候，這叫做 “導(dǎo)出(export)”。當(dāng)模塊的導(dǎo)出存在的時候，其他模塊就能夠顯式地指定它們依賴于這個模塊的某些變量，類或者函數(shù)。

因為存在這種顯式的關(guān)系，你可以明確的指出當(dāng)你去掉了另外一個(導(dǎo)出)，哪個模塊會崩潰掉。

一旦擁有了這種能在模塊之間導(dǎo)出和導(dǎo)入變量的能力，把你的代碼分割成更小并且能夠互相之間獨立工作的代碼塊就變得很容易了。 然后你就可以結(jié)合或者重組這些代碼塊，像組合樂高積木一樣，來使用同樣的模塊創(chuàng)建不同的應(yīng)用。

正因為模塊如此地有用，已經(jīng)存在很多給 JavaScript 添加模塊的嘗試。目前，有兩種模塊系統(tǒng)被廣泛地使用著。CommonJS(CJS) 曾經(jīng)被 Node.js 所使用。ESM(ECMAScript 模塊)是一個更新的模塊系統(tǒng)，并加入到 JavaScript 的規(guī)范當(dāng)中。瀏覽器已經(jīng)支持 ES 模塊了，Node.js 也正在添加對它的支持。

現(xiàn)在，就讓我們更加深入地來看一下這個新的模塊系統(tǒng)是如何運作的。

ES 模塊是如何運作的

當(dāng)使用模塊來開發(fā)的時候，會建立一個模塊模塊依賴圖。不同依賴之間聯(lián)系來自于你使用的任何 import 語句。

這些 import 語句是瀏覽器或者 Node 確切地知道你需要加載什么樣的代碼的關(guān)鍵之處。你需要提供一個文件來作為依賴圖的入口。 從這個入口開始，根據(jù)這些 import 語句就可以找剩余所需要的代碼。

但是瀏覽器并不能直接使用這些文件本身。它必須要經(jīng)過解析并轉(zhuǎn)換成一種叫做 “模塊記錄(Module Records)”的數(shù)據(jù)結(jié)構(gòu)。只有這樣，瀏覽器才能確切地知道這個文件里發(fā)生了什么。

在這之后，模塊記錄需要轉(zhuǎn)變成模塊實例。模塊實例包含了兩個要素：編碼(code)和狀態(tài)(state)

編碼基本上就是一些系列的指令。它就像配方一樣。但是只有配方本身，什么都做不了，所以還需要一些原材料來配合這些指令。

什么是狀態(tài)?狀態(tài)就提供了這些原材料。狀態(tài)就是這些變量在任何時間點的具體值。當(dāng)然，這些變量不過是內(nèi)存中保存這些變量的容器的別名。

所以模塊實例就結(jié)合了編碼(一系列的指令)和狀態(tài)(所有的變量的值)。

以上就是關(guān)于ES Modules是什么及ES Modules有什么用這方面的一些信息了 小編整理的這些訊息希望對童鞋們有所幫助