簡介

早期的 Web 網(wǎng)站主要由 HTML 和 CSS 組成。如果有任何 JavaScript 的代碼需要在頁面中執(zhí)行，通常是以小的代碼片段的形式來提供功能和交互性。結果就是通常 JavaScript 的代碼都會被編寫在一個文件中，然后通過 script 標簽加載到頁面中。開發(fā)人員可以將 JavaScript 代碼拆分成多個 js 文件，但是所有 JavaScript 變量和函數(shù)都會被添加到全局作用域中。

但是隨著 Angular、React 以及 Vue 等 Web 框架技術的發(fā)展，并且大部分公司都在開發(fā)高級 Web 應用而非桌面應用，JavaScript 就變得越來越重要了。將能夠復用的代碼邏輯封裝成公共代碼，并且在避免全局命名空間污染的前提下，將其模塊化，這一需求就成為了必要。

ECMAScript 2015 規(guī)范引入了允許使用 import 和 export 語句的 modules 概念。在本教程中，你將學習什么是 JavaScript 模塊以及如何使用 import 和export 管理代碼結構。

模塊化編程

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

index.html 文件將顯示兩個數(shù)字的和，差，乘積和商的結果，并在腳本標簽中鏈接到兩個JavaScript 文件。在文本編輯器中新建 index.html 并添加以下代碼：

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
  
  
  
  
     
  
  
  
  
   
  
  
  
  
 
  
  
  
  
   
  
  
  
  
    
Answers
 
  
  
  
  
    
 and 
 
  
  
  
  
 
  
  
  
  
    
Addition
 
  
  
  
  
    
 
  
  
  
  
 
  
  
  
  
    
Subtraction
 
  
  
  
  
    
 
  
  
  
  
 
  
  
  
  
    
Multiplication
 
  
  
  
  
    
 
  
  
  
  
 
  
  
  
  
    
Division
 
  
  
  
  
    
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
     
  
  
  
  
   
  
  
  
  
 
 
 
 
 

該 HTML 將在 h2 標簽中顯示變量 x 和 y 的值，并在其下 p 元素中顯示這些變量的運算值。元素id 屬性為了方便 script.js 文件中的 DOM 操作，script.js 文件還會設置 x 和 y 的值。更多 HTML 相關內(nèi)容可以參考我的如何使用 HTML 創(chuàng)建網(wǎng)站系列文章。

functions.js 文件則提供第二個腳本中將要使用到的數(shù)學函數(shù)。打開 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 文件將計算出 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 查看運行結果:

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

• 污染全局命名空間：在腳本中創(chuàng)建的所有變量包括 sum, difference 等等，都會存在全局 window對象中。如果試圖在一個文件中使用一個名為 sum 的變量，那么就會很難知曉我們使用的是在哪個腳本中的 sum，因為它們都是使用的相同全局 window.sum 變量。將變量私有化的唯一方法就是將變量放入函數(shù)作用域中。DOM 中的名為 x 的 id 屬性和 var id 的變量也會存在沖突(因為如果在 DOM 中使用了 id 屬性，瀏覽器會聲明一個同名的全局變量)。
• 依賴管理：必須從上到下依次加載 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. 
 
 
 
 

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

模塊與常規(guī)腳本的區(qū)別：

• 模塊不會向全局(window)作用域添加任何內(nèi)容。
• 模塊始終處于嚴格模式。
• 在同一文件中引用同一模塊多次將無效，因為模塊只會被執(zhí)行一次。
• 模塊需要運行在服務器環(huán)境。

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

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

按名稱導出

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

 
 
 
 

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

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

 
 
 
 

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

也可以使用別名來重命名該函數(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ù)的結果。

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

 
 
 
 

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

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

 
 
 
 

  
  
  
  
// 基礎類型值 
  
  
  
  
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ù)表達式 
  
  
  
  
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; 
  
  
  
  
  } 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
// 類的實例 
  
  
  
  
export const book = new Book("Lord of the Rings", "J. R. R. Tolkien"); 
 
 
 
 

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

默認導出

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

例如，將以下內(nèi)容添加至 functions.js 文件：

 
 
 
 

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

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

 
 
 
 

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

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

 
 
 
 

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

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

 
 
 
 

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

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

 
 
 
 

  
  
  
  
import book from "./functions.js"; 
 
 
 
 

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

 
 
 
 

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

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

 
 
 
 

  
  
  
  
import anonymousFunction from "./functions.js"; 
 
 
 
 

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

 
 
 
 

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

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

 
 
 
 

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

現(xiàn)在，默認值和命名值都可以在 script 中使用。

總結

模塊化編程設計實踐可以將代碼拆分到單獨的組件中，從而提高代碼的復用率和一致性，同時還可以保護全局命名空間不被污染。模塊化接口可以用原生 JavaScript 的關鍵字 import 和 export 來實現(xiàn)。

通過本文的學習，你了解了 JavaScript 中模塊的歷史、如何將 JavaScript 文件分離為多個腳本以及如何使用模塊化方法按命名的 import、export 和默認的 import、export 語法來更新這些文件。

了解更多有關 JavaScript 中模塊的信息，請閱讀 Mozilla Modules。如果你想探索 Node.js 中的模塊，可以閱讀 How To Create a Node.js Module tutorial

譯者：NieZhuZhu(彈鐵蛋同學)

校對者：zenblo、Qiaoj、lsvih

原文地址：Understanding Modules and Import and Export Statements in JavaScript

原文作者：Tania Rascia

譯文出自：掘金翻譯計劃

本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/understanding-modules-and-import-and-export-statements-in-javascript.md

本文轉載自微信公眾號「前端鐵蛋」，可以通過以下二維碼關注。轉載本文請聯(lián)系前端鐵蛋公眾號。


分享題目：JavaScript中模塊的導入和導出
瀏覽地址：http://uogjgqi.cn/article/codoohc.html