[[405075]]

本文轉(zhuǎn)載自微信公眾號「勾勾的前端世界」，作者西嶺。轉(zhuǎn)載本文請聯(lián)系勾勾的前端世界公眾號。

ES 標(biāo)準模塊化規(guī)范-概述

歷史上，JavaScript 一直沒有模塊(module)體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的 import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發(fā)大型的、復(fù)雜的項目形成了巨大障礙。

在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語言標(biāo)準的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

ES6 模塊的設(shè)計思想是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。

一個模塊就是一個獨立的文件。該文件內(nèi)部的所有變量，外部無法獲取。

如果你希望外部能夠讀取模塊內(nèi)部的某個變量，就必須使用 export 關(guān)鍵字導(dǎo)出該變量。想要是要其他模塊導(dǎo)出的內(nèi)容, 就必須使用 import 導(dǎo)入。

導(dǎo)入 (Importing)

導(dǎo)入的值不能重新分配，盡管導(dǎo)入的對象和數(shù)組可以被修改(導(dǎo)出模塊，以及任何其他的導(dǎo)入，都將受到該修改的影響)。在這種情況下，它們的行為與 const 聲明類似。

• 命名導(dǎo)入 (Named Imports)

從源模塊導(dǎo)入其原始名稱的特定項目。

import  { something } from'./module.js'; 

從源模塊導(dǎo)入特定項，并在導(dǎo)入時指定自定義名稱。

import { something as somethingElse } from'./module.js'; 

• 命名空間導(dǎo)入 (Namespace Imports)

將源模塊中的所有內(nèi)容作為對象導(dǎo)入，將所有源模塊的命名導(dǎo)出公開為屬性和方法。默認導(dǎo)出被排除在此對象之外。

importas module from'./module.js' 

上面的 “something” 的例子將被附加到作為屬性的導(dǎo)入對象上。

“module.something”。 

• 默認導(dǎo)入 (Default Import)

導(dǎo)入源文件的默認導(dǎo)出。

import something from'./module.js'; 

• 空的導(dǎo)入 (Empty Import)

加載模塊代碼，但不要創(chuàng)建任何新對象。

import './module.js'; 

這對于 polyfills 是有用的，或者當(dāng)導(dǎo)入的代碼的主要目的是與原型有關(guān)的時候。

導(dǎo)出 (Exporting)

• 命名導(dǎo)出 (Named exports)

導(dǎo)出具體聲明的值：

var something =true; 
export { something }; 

在導(dǎo)出時重命名：

export { something as somethingElse }; 

聲明后立即導(dǎo)出：

// 這可以與 `var`, `let`, `const`, `class`, and `function` 配合使用 
exportvar something =true; 

• 默認導(dǎo)出(Default Export)

導(dǎo)出一個值作為源模塊的默認導(dǎo)出：

exportdefault something; 

當(dāng)源模塊只有一個導(dǎo)出時，才建議使用此做法。

將默認和命名導(dǎo)出，并放在同一模塊中是不好的，盡管它是符合規(guī)范的。