站長資訊網
在互聯網的洪荒時代，網站主要用 HTML和 CSS 開發的。如果將 JavaScript 加載到頁面中，通常是以小片段的形式提供效果和交互，一般會把所有的 JavaScript 代碼全都寫在一個文件中，并加載到一個 script 標簽中。盡管可以把 JavaScript 拆分為多個文件，但是所有的變量和函數仍然會被添加到全局作用域中。
但是后來 JavaScript 在瀏覽器中發揮著重要的作用，迫切需要使用第三方代碼來完成常見任務，并且需要把代碼分解為模塊化的文件，避免污染全局命名空間。
ECMAScript 2015 規范在 JavaScript 語言中引入了 module，也有了 import 和 export 語句。在本文中，我們一起來學習 JavaScript 模塊，以及怎樣用 import 和 export 來組織代碼。
模塊化編程
在 JavaScript 中出現模塊的概念之前，當我們想要把自己的代碼組織為多個塊時，一般會創建多個文件，并且將它們鏈接為單獨的腳本。下面先舉例說明，首先創建一個 index.html 文件和兩個JavaScript文件“ functions.js 和 script.js。
index.html 文件用來顯示兩個數字的和、差、乘積和商，并鏈接到 script 標簽中的兩個 JavaScript 文件。打開 index.html 并添加以下代碼：
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>pision</h3> <p id="pision"></p> <script src="functions.js"></script> <script src="script.js"></script> </body> </html>
這個頁面很簡單，就不詳細說明了。
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 的值，以及調用前面那些函數并顯示結果：
script.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('pision').textContent = quotient(x, y)
保存之后在瀏覽器中打開 index.html 可以看到所有結果：
對于只需要一些小腳本的網站，這不失為一種有效的組織代碼的方法。但是這種方法存在一些問題：
- 污染全局命名空間：你在腳本中創建的所有變量（
sum、difference等）現在都存在于window對象中。如果你打算在另一個文件中使用另一個名為sum的變量，會很難知道在腳本的其它位置到底用的是哪一個值變量，因為它們用的都是相同的window.sum變量。唯一可以使變量私有的方法是將其放在函數的作用域中。甚至在 DOM 中名為x的id可能會和var x存在沖突。 - 依賴管理：必須從上到下依次加載腳本來確保可以使用正確的變量。將腳本分別保存存為不同文件會產生分離的錯覺，但本質上與放在頁面中的單個
<script>中相同。
在 ES6 把原生模塊添加到 JavaScript 語言之前，社區曾經嘗試著提供了幾種解決方案。第一個解決方案是用原生 JavaScript 編寫的，例如將所有代碼都寫在 objects 或立即調用的函數表達式（IIFE）中，并將它們放在全局命名空間中的單個對象上。這是對多腳本方法的一種改進，但是仍然存在將至少一個對象放入全局命名空間的問題，并沒有使在第三方之間一致地共享代碼的問題變得更加容易。
之后又出現了一些模塊解決方案：CommonJS 是一種在 Node.js 實現的同步方法，異步模塊定義（AMD）是一種異步方法，還有支持前面兩種樣式的通用方法——通用模塊定義（UMD）。
這些解決方案的出現使我們可以更輕松地以包的形式共享和重用代碼，也就是可以分發和共享的模塊，例如 npm。但是由于存在許多解決方案，并且都不是 JavaScript 原生的，所以需要依靠 Babel、Webpack 或 Browserify之類的工具才能在瀏覽器中使用。
由于多文件方法存在許多問題，并且解決方案很復雜，所以開發人員對把模塊化開發的方法引入 JavaScript 語言非常感興趣。于是 ECMAScript 2015 開始支持 JavaScript module。
module 是一組代碼，用來提供其他模塊所使用的功能，并能使用其他模塊的功能。 export 模塊提供代碼，import 模塊使用其他代碼。模塊之所以有用，是因為它們允許我們重用代碼，它們提供了許多可用的穩定、一致的接口，并且不會污染全局命名空間。
模塊（有時稱為 ES 模塊）現在可以在原生 JavaScript 中使用，在本文中，我們一起來探索怎樣在代碼中使用及實現。
原生 JavaScript 模塊
JavaScript 中的模塊使用import 和 export 關鍵字：
import：用于讀取從另一個模塊導出的代碼。export：用于向其他模塊提供代碼。
接下來把前面的的 functions.js 文件更新為模塊并導出函數。在每個函數的前面添加 export 。
functions.js
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 中用 import 從前面的 functions.js 模塊中檢索代碼。
注意：
import必須始終位于文件的頂部，然后再寫其他代碼，并且還必須包括相對路徑（在這個例子里為./）。
把 script.js 中的代碼改成下面的樣子：
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('pision').textContent = quotient(x, y)
注意：要通過在花括號中命名單個函數來導入。
為了確保代碼作為模塊導入，而不是作為常規腳本加載，要在 index.html 中的 script 標簽中添加type="module"。任何使用 import 或 export 的代碼都必須使用這個屬性：
index.html
<script type="module" src="functions.js"> </script> <script type="module" src="script.js"> </script>
由于受限于 CORS 策略，必須在服務器環境中使用模塊，否則會出現下面的錯誤：
Access 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.
模塊與常規腳本不一樣的地方：
- 模塊不會向全局（
window）作用域添加任何內容。 - 模塊始終處于嚴格模式。
- 在同一文件中把同一模塊加載兩次不會出問題，因為模塊僅執行一次
- 模塊需要服務器環境。
模塊仍然經常與打包程序（如 Webpack）一起配合使用，用來增加對瀏覽器的支持和附加功能，但它們也可以直接用在瀏覽器中。
接下來探索
