溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)如何進(jìn)行JavaScript中模塊的導(dǎo)入和導(dǎo)出，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
簡(jiǎn)介
早期的 Web 網(wǎng)站主要由 HTML 和 CSS 組成。如果有任何 JavaScript 的代碼需要在頁(yè)面中執(zhí)行，通常是以小的代碼片段的形式來(lái)提供功能和交互性。結(jié)果就是通常 JavaScript 的代碼都會(huì)被編寫(xiě)在一個(gè)文件中，然后通過(guò) script 標(biāo)簽加載到頁(yè)面中。開(kāi)發(fā)人員可以將 JavaScript 代碼拆分成多個(gè) js 文件，但是所有 JavaScript 變量和函數(shù)都會(huì)被添加到全局作用域中。
但是隨著 Angular、React 以及 Vue 等 Web 框架技術(shù)的發(fā)展，并且大部分公司都在開(kāi)發(fā)高級(jí) Web 應(yīng)用而非桌面應(yīng)用，JavaScript 就變得越來(lái)越重要了。將能夠復(fù)用的代碼邏輯封裝成公共代碼，并且在避免全局命名空間污染的前提下，將其模塊化，這一需求就成為了必要。
ECMAScript 2015 規(guī)范引入了允許使用 import 和 export 語(yǔ)句的 modules 概念。在本教程中，你將學(xué)習(xí)什么是 JavaScript 模塊以及如何使用 import 和export 管理代碼結(jié)構(gòu)。
模塊化編程
在 JavaScript 引入模塊化概念之前，當(dāng)開(kāi)發(fā)人員想要將代碼封裝時(shí)，需要?jiǎng)?chuàng)建多個(gè)文件并將這些文件鏈接為單獨(dú)的腳本。作者為了說(shuō)明這一點(diǎn)，創(chuàng)建了一個(gè)示例：index.html 文件和兩個(gè) JavaScript 文件，functions.js 和script.js。
index.html 文件將顯示兩個(gè)數(shù)字的和，差，乘積和商的結(jié)果，并在腳本標(biāo)簽中鏈接到兩個(gè)JavaScript 文件。在文本編輯器中新建 index.html 并添加以下代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>JavaScript Modules</title> </head> <body> <h2>Answers</h2> <h3><strong id="x"></strong> and <strong id="y"></strong></h3> <h4>Addition</h4> <p id="addition"></p> <h4>Subtraction</h4> <p id="subtraction"></p> <h4>Multiplication</h4> <p id="multiplication"></p> <h4>Division</h4> <p id="division"></p> <script src="functions.js"></script> <script src="script.js"></script> </body> </html>
該 HTML 將在 h3 標(biāo)簽中顯示變量 x 和 y 的值，并在其下 p 元素中顯示這些變量的運(yùn)算值。元素id 屬性為了方便 script.js 文件中的 DOM 操作，script.js 文件還會(huì)設(shè)置 x 和 y 的值。更多 HTML 相關(guān)內(nèi)容可以參考我的如何使用 HTML 創(chuàng)建網(wǎng)站系列文章。
functions.js 文件則提供第二個(gè)腳本中將要使用到的數(shù)學(xué)函數(shù)。打開(kāi) functions.js 文件并添加以下內(nèi)容：
function sum(x, y) { return x + y; } function difference(x, y) { return x - y; } function product(x, y) { return x * y; } function quotient(x, y) { return x / y; }最后，script.js 文件將計(jì)算出 x 和 y 的值，并顯示結(jié)果：
const x = 10; const y = 5; document.getElementById("x").textContent = x; document.getElementById("y").textContent = y; document.getElementById("addition").textContent = sum(x, y); document.getElementById("subtraction").textContent = difference(x, y); document.getElementById("multiplication").textContent = product(x, y); document.getElementById("division").textContent = quotient(x, y);完成上述操作之后, 可以在瀏覽器中打開(kāi) index.html 查看運(yùn)行結(jié)果:
對(duì)于只有少量 script 文件的網(wǎng)站應(yīng)用，這是個(gè)很高效的代碼拆分方案。然而，這種做法會(huì)存在一些問(wèn)題：
污染全局命名空間：在腳本中創(chuàng)建的所有變量包括 sum, difference 等等，都會(huì)存在全局 window對(duì)象中。如果試圖在一個(gè)文件中使用一個(gè)名為 sum 的變量，那么就會(huì)很難知曉我們使用的是在哪個(gè)腳本中的 sum，因?yàn)樗鼈兌际鞘褂玫南嗤?window.sum 變量。將變量私有化的唯一方法就是將變量放入函數(shù)作用域中。DOM 中的名為 x 的 id 屬性和 var id 的變量也會(huì)存在沖突(因?yàn)槿绻?DOM 中使用了 id 屬性，瀏覽器會(huì)聲明一個(gè)同名的全局變量)。
依賴管理：必須從上到下依次加載 script，以確保變量正確可用。將 <script> 分成不同文件依次引入會(huì)給人分離的錯(cuò)覺(jué)，但本質(zhì)上這種方式與在瀏覽器頁(yè)面中使用單個(gè) <script> 來(lái)引入腳本代碼是相同效果的。
在 ES6 將原生模塊概念添加到 JavaScript 語(yǔ)言之前，社區(qū)嘗試了幾種解決方案。第一個(gè)解決方案就是通過(guò)普通的 JavaScript 對(duì)象實(shí)現(xiàn)的，比如將所有代碼寫(xiě)在 objects 或者立即調(diào)用的函數(shù)表達(dá)式(IIFE)并將它們放在全局中作用域中的單個(gè)對(duì)象中。這是對(duì)多腳本方法的一種改進(jìn)，但是仍然會(huì)存在將至少一個(gè)對(duì)象放入全局名稱空間的相同問(wèn)題，并且始終沒(méi)有解決多個(gè)腳本之間共享代碼的問(wèn)題。
之后，出現(xiàn)了一些模塊化解決方案：CommonJS，是在 Node.js 實(shí)現(xiàn)的同步加載模塊的方法，異步模塊定義(AMD)則是非同步加載模塊，還有通用模塊定義(UMD)，旨在成為能夠支持兩種加載模式的通用的解決方案
這些解決方案的出現(xiàn)使得開(kāi)發(fā)人員更容易地以 package 的形式共享和重用代碼，這些模塊也可以被轉(zhuǎn)發(fā)和共享，例如一些能在 npm 上找到的 packages。但是, 由于有如此多的解決方案并且沒(méi)有一個(gè)是 JavaScript 原生的，所以為了能在瀏覽器中使用模塊，一些相應(yīng)的工具出現(xiàn)了，比如 Babel、Webpack 以及 Browserify。
由于多文件方案存在許多問(wèn)題，并且所提出的解決方案很復(fù)雜，因此開(kāi)發(fā)人員對(duì)將模塊化編程引入 JavaScript 語(yǔ)言很感興趣。因此，ECMAScript 2015 支持 JavaScript 模塊的使用。
一個(gè)模塊是一段可以為其他模塊提供函數(shù)功能的代碼塊，同時(shí)也可以依賴別的模塊里的功能。模塊中exports 用以導(dǎo)出， imports 用來(lái)引用。模塊之所以有用，是因?yàn)樗鼈冊(cè)试S開(kāi)發(fā)人員復(fù)用代碼，它們提供許多開(kāi)發(fā)人員可以使用的穩(wěn)定、一致的接口，并且它們還不會(huì)污染全局命名空間。
模塊(有時(shí)稱為 ECMAScript 模塊或 ES 模塊)現(xiàn)在可以在 JavaScript 中直接使用，在本教程的剩余部分中，你將探索如何在代碼中使用和實(shí)現(xiàn)它們。
原生 JavaScript 模塊
JavaScript 中的模塊使用 import 和 export 關(guān)鍵字:
import: 用于讀取從另一個(gè)模塊導(dǎo)出的代碼。
export: 用于向其他模塊提供代碼。
為了演示如何使用模塊的導(dǎo)入導(dǎo)出，請(qǐng)將 functions.js 文件中函數(shù)使用模塊導(dǎo)出。在每個(gè)函數(shù)的前面添加 export 關(guān)鍵字，這可以讓導(dǎo)出的函數(shù)在其他模塊使用。
將以下的代碼添加到文件中：
export function sum(x, y) { return x + y; } export function difference(x, y) { return x - y; } export function product(x, y) { return x * y; } export function quotient(x, y) { return x / y; }現(xiàn)在，在 script.js 中，你可以在 functions.js 文件的頂部使用 import 從其他模塊引入代碼。
注意：import 必須始終位于文件的頂部。在這個(gè)例子中并且還必須使用相對(duì)路徑(本示例為 ./)。
將以下代碼添加到 script.js 中：
import { sum, difference, product, quotient } from "./functions.js"; const x = 10; const y = 5; document.getElementById("x").textContent = x; document.getElementById("y").textContent = y; document.getElementById("addition").textContent = sum(x, y); document.getElementById("subtraction").textContent = difference(x, y); document.getElementById("multiplication").textContent = product(x, y); document.getElementById("division").textContent = quotient(x, y);請(qǐng)注意，通過(guò)在花括號(hào)中命名單個(gè)函數(shù)來(lái)導(dǎo)入它們。
為了確保此代碼作為模塊而不是常規(guī)腳本加載，請(qǐng)?jiān)?index.html 中的 script 標(biāo)簽中添加 type ="module"。任何使用 import 或 export 的代碼都必須使用這個(gè)屬性：
... <script type="module" src="functions.js"></script> <script type="module" src="script.js"></script>
刷新頁(yè)面以重新加載代碼，這時(shí)頁(yè)面就會(huì)使用模塊進(jìn)行加載。雖然瀏覽器對(duì)模塊的支持度很高，但是我們可以通過(guò) caniuse 檢查不同瀏覽器的支持度。請(qǐng)注意，如果將文件作為本地文件的的直鏈，就會(huì)遇到這個(gè)錯(cuò)誤：
OutputAccess to script at 'file:///Users/your_file_path/script.js' from origin 'null' has been blocked by CORS policy: Cross-origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
由于跨域資源共享，模塊必須在服務(wù)器環(huán)境中使用，可以本地使用 http-server 也可以通過(guò)托管服務(wù)提供商在 Internet 上進(jìn)行設(shè)置。
模塊與常規(guī)腳本的區(qū)別：
模塊不會(huì)向全局(window)作用域添加任何內(nèi)容。
模塊始終處于嚴(yán)格模式。
在同一文件中引用同一模塊多次將無(wú)效，因?yàn)槟K只會(huì)被執(zhí)行一次。
模塊需要運(yùn)行在服務(wù)器環(huán)境。
模塊也會(huì)經(jīng)常與打包工具(如 Webpack)一起使用，以增加對(duì)瀏覽器的支持和一些附加功能，但它們也可以直接在瀏覽器中使用。
接下來(lái)，我們將探索更多使用 import 和 export 語(yǔ)法的方式。
按名稱導(dǎo)出
如前所述，使用 export 語(yǔ)法將允許分別導(dǎo)入按名稱導(dǎo)出的值。例如，使用以下簡(jiǎn)化版本的function.js：
export function sum() {} export function difference() {}這將允許使用花括號(hào)按名稱導(dǎo)入 sum 和 difference：
import { sum, difference } from "./functions.js";也可以使用別名來(lái)重命名該函數(shù)以避免在同一模塊中命名沖突。在此示例中，sum 將重命名為 add，difference 將重命名為 subtract。
import { sum as add, difference as subtract } from "./functions.js"; add(1, 2); // 3在這里調(diào)用 add() 將產(chǎn)生 sum() 函數(shù)的結(jié)果。
使用 * 語(yǔ)法，可以將整個(gè)模塊的內(nèi)容導(dǎo)入到一個(gè)對(duì)象中。在下面這種情況下，sum 和 difference 將成為 mathFunctions 對(duì)象上的方法。
import * as mathFunctions from "./functions.js"; mathFunctions.sum(1, 2); // 3 mathFunctions.difference(10, 3); // 7
基礎(chǔ)類型、函數(shù)表達(dá)式、函數(shù)定義式、異步函數(shù)、類以及類的實(shí)例也可以被導(dǎo)出，只要它們具有標(biāo)識(shí)符即可：
// 基礎(chǔ)類型值 export const number = 100; export const string = "string"; export const undef = undefined; export const empty = null; export const obj = { name: "Homer" }; export const array = ["Bart", "Lisa", "Maggie"]; // 函數(shù)表達(dá)式 export const sum = (x, y) => x + y; // 函數(shù)定義式 export function difference(x, y) { return x - y; } // 箭頭函數(shù) export async function getBooks() {} // 類 export class Book { constructor(name, author) { this.name = name; this.author = author; } } // 類的實(shí)例 export const book = new Book("Lord of the Rings", "J. R. R. Tolkien");所有這些 exports 都可以成功地 import。下一小節(jié)我們將探討的另一種導(dǎo)出類型 —— 默認(rèn)導(dǎo)出。
默認(rèn)導(dǎo)出
在前面的示例中，我們進(jìn)行了多個(gè)命名的導(dǎo)出，并將它們分別導(dǎo)入或者作為一個(gè)對(duì)象進(jìn)行了導(dǎo)入，以及也嘗試了將導(dǎo)出看做一個(gè)對(duì)象，每次導(dǎo)出均作為該對(duì)象的方法。模塊也可以使用關(guān)鍵字 default 包含默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出不是使用大括號(hào)導(dǎo)入，而是直接導(dǎo)入到命名標(biāo)識(shí)符中。
例如，將以下內(nèi)容添加至 functions.js 文件：
export default function sum(x, y) { return x + y; }在 script.js 文件中，你可以使用以下命令將默認(rèn)函數(shù)導(dǎo)入為 sum：
import sum from "./functions.js"; sum(1, 2); // 3
這很危險(xiǎn)，因?yàn)樵趯?dǎo)入過(guò)程中對(duì)默認(rèn)導(dǎo)出的命名沒(méi)有任何限制。在下面這個(gè)例子中，默認(rèn)函數(shù)被導(dǎo)入為 difference，盡管它實(shí)際上是 sum 函數(shù)：
import difference from "./functions.js"; difference(1, 2); // 3
因此，通常首選應(yīng)該使用按命名導(dǎo)出。與按命名導(dǎo)出不同，默認(rèn)導(dǎo)出不需要標(biāo)識(shí)符 —— 基礎(chǔ)類型的值或匿名函數(shù)都可以用作默認(rèn)導(dǎo)出。下面是用作默認(rèn)導(dǎo)出的對(duì)象的示例：
export default { name: "Lord of the Rings", author: "J. R. R. Tolkien", };你可以使用以下命令將其作為 book 導(dǎo)入：
import book from "./functions.js";
同樣地，下面例子展示了箭頭函數(shù)的默認(rèn)導(dǎo)出：
export default () => "This function is anonymous";
可以像下面這樣引入 script.js 中的箭頭函數(shù)：
import anonymousFunction from "./functions.js";
按命名導(dǎo)出和默認(rèn)導(dǎo)出可以同時(shí)使用，比如在下面這個(gè)模塊中，導(dǎo)出兩個(gè)命名值和一個(gè)默認(rèn)值：
export const length = 10; export const width = 5; export default function perimeter(x, y) { return 2 * (x + y); }我們可以使用以下代碼導(dǎo)入這些變量和默認(rèn)函數(shù)：
import calculatePerimeter, { length, width } from "./functions.js"; calculatePerimeter(length, width); // 30現(xiàn)在，默認(rèn)值和命名值都可以在 script 中使用。
模塊化編程設(shè)計(jì)實(shí)踐可以將代碼拆分到單獨(dú)的組件中，從而提高代碼的復(fù)用率和一致性，同時(shí)還可以保護(hù)全局命名空間不被污染。模塊化接口可以用原生 JavaScript 的關(guān)鍵字 import 和 export 來(lái)實(shí)現(xiàn)。
看完上述內(nèi)容，你們對(duì)如何進(jìn)行JavaScript中模塊的導(dǎo)入和導(dǎo)出有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼