JavaScript中模塊的導入和導出

本文轉載自查看原文 2021-07-28 17:11 133 javascript

模塊化編程

在 JavaScript 引入模塊化概念之前，當開發人員想要將代碼封裝時，需要創建多個文件並將這些文件鏈接為單獨的腳本。作者為了說明這一點，創建了一個示例：index.html 文件和兩個 JavaScript 文件，functions.js 和script.js。

index.html 文件將顯示兩個數字的和，差，乘積和商的結果，並在腳本標簽中鏈接到兩個 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> <h1>Answers</h1> <h2><strong id="x"></strong> and <strong id="y"></strong></h2> <h3>Addition</h3> <p id="addition"></p> <h3>Subtraction</h3> <p id="subtraction"></p> <h3>Multiplication</h3> <p id="multiplication"></p> <h3>division</h3> <p id="division"></p> <script src="functions.js"></script> <script src="script.js"></script> </body> </html>

該 HTML 將在 h2 標簽中顯示變量 x 和 y 的值，並在其下 p 元素中顯示這些變量的運算值。元素 id 屬性為了方便 script.js 文件中的 DOM 操作，script.js 文件還會設置 x 和 y 的值。

functions.js 文件則提供第二個腳本中將要使用到的數學函數。打開 functions.js 文件並添加以下內容：

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 文件將計算出 x 和 y 的值，並顯示結果：

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);

完成上述操作之后, 可以在瀏覽器中打開 index.html 查看運行結果:

Rendered HTML with the values 10 and 5 and the results of the functions.js operations.

對於只有少量 script 文件的網站應用，這是個很高效的代碼拆分方案。然而，這種做法會存在一些問題：

污染全局命名空間：在腳本中創建的所有變量包括 sum, difference 等等，都會存在全局 window 對象中。如果試圖在一個文件中使用一個名為 sum 的變量，那么就會很難知曉我們使用的是在哪個腳本中的 sum，因為它們都是使用的相同全局 window.sum 變量。將變量私有化的唯一方法就是將變量放入函數作用域中。DOM 中的名為 x 的 id 屬性和 var id 的變量也會存在沖突（因為如果在 DOM 中使用了 id 屬性，瀏覽器會聲明一個同名的全局變量）。
依賴管理：必須從上到下依次加載 script，以確保變量正確可用。將 <script> 分成不同文件依次引入會給人分離的錯覺，但本質上這種方式與在瀏覽器頁面中使用單個 <script> 來引入腳本代碼是相同效果的。

在 ES6 將原生模塊概念添加到 JavaScript 語言之前，社區嘗試了幾種解決方案。第一個解決方案就是通過普通的 JavaScript 對象實現的，比如將所有代碼寫在 objects 或者立即調用的函數表達式（IIFE）並將它們放在全局中作用域中的單個對象中。這是對多腳本方法的一種改進，但是仍然會存在將至少一個對象放入全局名稱空間的相同問題，並且始終沒有解決多個腳本之間共享代碼的問題。

之后，出現了一些模塊化解決方案：CommonJS，是在 Node.js 實現的同步加載模塊的方法，異步模塊定義（AMD）則是非同步加載模塊，還有通用模塊定義（UMD），旨在成為能夠支持兩種加載模式的通用的解決方案
這些解決方案的出現使得開發人員更容易地以 package 的形式共享和重用代碼，這些模塊也可以被轉發和共享，例如一些能在 npm 上找到的 packages。但是, 由於有如此多的解決方案並且沒有一個是 JavaScript 原生的，所以為了能在瀏覽其中使用模塊，一些相應的工具出現了，比如 Babel、webpack 以及 Browserify。
由於多文件方案存在許多問題，並且所提出的解決方案很復雜，因此開發人員對將模塊化編程引入 JavaScript 語言很感興趣。因此，ECMAScript 2015 支持 JavaScript 模塊的使用。

一個模塊是一段可以為其他模塊提供函數功能的代碼塊，同時也可以依賴別的模塊里的功能。模塊中 exports 用以導出， imports 用來引用。模塊之所以有用，是因為它們允許開發人員復用代碼，它們提供許多開發人員可以使用的穩定、一致的接口，並且它們還不會污染全局命名空間。

模塊（有時稱為 ECMAScript 模塊或 ES 模塊）現在可以在 JavaScript 中直接使用，在本教程的剩余部分中，你將探索如何在代碼中使用和實現它們。

原生 JavaScript 模塊

JavaScript 中的模塊使用 import 和 export 關鍵字:

import: 用於讀取從另一個模塊導出的代碼。
export: 用於向其他模塊提供代碼。

為了演示如何使用模塊的導入導出，請將 functions.js 文件中函數使用模塊導出。在每個函數的前面添加 export 關鍵字，這可以讓導出的函數在其他模塊使用。

將以下的代碼添加到文件中：

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; }

現在，在 script.js 中，你可以在 functions.js 文件的頂部使用 import 從其他模塊引入代碼。

注意：import 必須始終位於文件的頂部。在這個例子中並且還必須使用相對路徑（本示例為 ./）。

將以下代碼添加到 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);

請注意，通過在花括號中命名單個函數來導入它們。

為了確保此代碼作為模塊而不是常規腳本加載，請在 index.html 中的 script 標簽中添加 type ="module"。任何使用 import 或 export 的代碼都必須使用這個屬性：

...
<script type="module" src="functions.js"></script> <script type="module" src="script.js"></script>

刷新頁面以重新加載代碼，這時頁面就會使用模塊進行加載。雖然瀏覽器對模塊的支持度很高，但是我們可以通過 caniuse 檢查不同瀏覽器的支持度。請注意，如果將文件作為本地文件的的直鏈，就會遇到這個錯誤：

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.

由於跨域資源共享，模塊必須在服務器環境中使用，可以本地使用 http-server 也可以通過托管服務提供商在 Internet 上進行設置。

模塊與常規腳本的區別：

模塊不會向全局（window）作用域添加任何內容。
模塊始終處於嚴格模式。
在同一文件中引用同一模塊多次將無效，因為模塊只會被執行一次。
模塊需要運行在服務器環境。

模塊也會經常與打包工具（如 webpack）一起使用，以增加對瀏覽器的支持和一些附加功能，但它們也可以直接在瀏覽器中使用。

接下來，我們將探索更多使用 import 和 export 語法的方式。

按名稱導出

如前所述，使用 export 語法將允許分別導入按名稱導出的值。例如，使用以下簡化版本的 function.js：

export function sum() {} export function difference() {}

這將允許使用花括號按名稱導入 sum 和 difference：

import { sum, difference } from "./functions.js";

也可以使用別名來重命名該函數以避免在同一模塊中命名沖突。在此示例中，sum 將重命名為 add，difference 將重命名為 subtract。

import { sum as add, difference as subtract } from "./functions.js"; add(1, 2); // 3

在這里調用 add() 將產生 sum() 函數的結果。

使用 * 語法，可以將整個模塊的內容導入到一個對象中。在下面這種情況下，sum 和 difference 將成為 mathFunctions 對象上的方法。

import * as mathFunctions from "./functions.js"; mathFunctions.sum(1, 2); // 3 mathFunctions.difference(10, 3); // 7

基礎類型、函數表達式、函數定義式、異步函數、類以及類的實例也可以被導出，只要它們具有標識符即可：

// 基礎類型值 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"]; // 函數表達式 export const sum = (x, y) => x + y; // 函數定義式 export function difference(x, y) { return x - y; } // 箭頭函數 export async function getBooks() {} // 類 export class Book { constructor(name, author) { this.name = name; this.author = author; } } // 類的實例 export const book = new Book("Lord of the Rings", "J. R. R. Tolkien");

所有這些 exports 都可以成功地 import。下一小節我們將探討的另一種導出類型 —— 默認導出。

https://www.51220.cn 51220網站目錄

默認導出

在前面的示例中，我們進行了多個命名的導出，並將它們分別導入或者作為一個對象進行了導入，以及也嘗試了將導出看做一個對象，每次導出均作為該對象的方法。模塊也可以使用關鍵字 default 包含默認導出。默認導出不是使用大括號導入，而是直接導入到命名標識符中。

例如，將以下內容添加至 functions.js 文件：

export default function sum(x, y) { return x + y; }

在 script.js 文件中，你可以使用以下命令將默認函數導入為 sum：

import sum from "./functions.js"; sum(1, 2); // 3

這很危險，因為在導入過程中對默認導出的命名沒有任何限制。在下面這個例子中，默認函數被導入為 difference，盡管它實際上是 sum 函數：

import difference from "./functions.js"; difference(1, 2); // 3

因此，通常首選應該使用按命名導出。與按命名導出不同，默認導出不需要標識符 —— 基礎類型的值或匿名函數都可以用作默認導出。下面是用作默認導出的對象的示例：

export default { name: "Lord of the Rings", author: "J. R. R. Tolkien", };

你可以使用以下命令將其作為 book 導入：

import book from "./functions.js";

同樣地，下面例子展示了箭頭函數的默認導出：

export default () => "This function is anonymous";

可以像下面這樣引入 script.js 中的箭頭函數：

import anonymousFunction from "./functions.js";

按命名導出和默認導出可以同時使用，比如在下面這個模塊中，導出兩個命名值和一個默認值：

export const length = 10; export const width = 5; export default function perimeter(x, y) { return 2 * (x + y); }

我們可以使用以下代碼導入這些變量和默認函數：

import calculatePerimeter, { length, width } from "./functions.js"; calculatePerimeter(length, width); // 30

現在，默認值和命名值都可以在 script 中使用。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 javascript模塊導入導出 Javascript - Vue - 模塊導入導出 TypeScript 模塊的導出、導入 Javascript中的require、import和export 導入模塊方式 js模塊導入/導出大全 TS 3.1 - 模塊（導入導出） ES6-模塊導入導出 webpack 導出、導入模塊（及路徑） js中各種導出和導入如何使用JavaScript導入和導出Excel文件