神墓辰东小说,小说,小说阅读网站

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

了解JavaScript中的ES模塊

本文轉(zhuǎn)載自微信公眾號(hào)「新鈦云服」，作者方章和翻譯。轉(zhuǎn)載本文請(qǐng)聯(lián)系新鈦云服公眾號(hào)。

成都創(chuàng)新互聯(lián)自2013年起，先為祁東等服務(wù)建站，祁東等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為祁東企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

如果你之前一直在使用JavaScript開發(fā)代碼，你就會(huì)知道早期的JavaScript沒有這樣的模塊功能。開發(fā)者為了將js文件加載到他們的頁面中，不得不使用HTML

Input

Output

如上圖所示，在HTML文件中，你需要在腳本標(biāo)簽中指定type="模塊"，瀏覽器才會(huì)將其視為ECMAScript模塊。

兼容性

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

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

如果你是在本地測(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í)演示。我希望你明白什么是ES模塊，以及為什么需要它們。

文章題目：了解JavaScript中的ES模塊
本文路徑：http://m.fisionsoft.com.cn/article/dhgcpdp.html

新聞中心

其他資訊