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

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

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

ES modules

這個(gè)標(biāo)準(zhǔn)化過程在 ES6 中完成，瀏覽器開始實(shí)施這個(gè)標(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)花費(fèi)了近 10 年的時(shí)間。

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

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

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

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

因?yàn)槟愕拇蠖鄶?shù)代碼都是在更改變量，如何組織這些變量將會(huì)對(duì)你的編碼方式以及代碼的維護(hù)產(chǎn)生重大的影響。

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

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

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

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

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

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

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

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

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

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

模塊如何提供幫助

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

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

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

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

因?yàn)榇嬖谶@種顯式的關(guān)系，你可以明確的指出當(dāng)你去掉了另外一個(gè)(導(dǎo)出)，哪個(gè)模塊會(huì)崩潰掉。

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

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

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

ES 模塊是如何運(yùn)作的

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

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

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

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

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

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

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

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