久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

如何理解JavaScript中的ES模塊

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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),印江企業(yè)網(wǎng)站建設(shè),印江品牌網(wǎng)站建設(shè),網(wǎng)站定制,印江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,印江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

如果你之前一直在使用JavaScript開發(fā)代碼，你就會知道早期的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í)它們所做的就是變量管理。它為變量賦值，修改變量，將兩個變量組合在一起等等。但是當(dāng)變量的數(shù)量隨著你的應(yīng)用程序的規(guī)模而增加時(shí)，你會發(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(shí)間對于良好的用戶體驗(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í)同時(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 = "<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="模塊"，瀏覽器才會將其視為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)以這種方式使用時(shí)，它會返回一個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)?？梢蚤_箱即用的異步模塊加載功能，你可以獲得更快的啟動時(shí)間以更好的性能。雖然您可以在瀏覽器中使用CommonJS與一些額外的插件，但強(qiáng)烈建議您切換到ES模塊，因?yàn)樗鼈兪菫g覽器中的原生模塊。

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

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

但是當(dāng)你開發(fā)一個應(yīng)用程序時(shí)，即使是剩下的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í)時(shí)演示。

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

當(dāng)前文章：如何理解JavaScript中的ES模塊
URL標(biāo)題：http://sd-ha.com/article6/jochog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、定制開發(fā)、電子商務(wù)、企業(yè)網(wǎng)站制作、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)