[[405075]]

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

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

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

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

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

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

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

導(dǎo)入 (Importing)

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

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

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

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

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

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

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

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

importas module from'./module.js' 

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

“module.something”。 

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

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

import something from'./module.js'; 

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

加載模塊代碼，但不要?jiǎng)?chuàng)建任何新對(duì)象。

import './module.js'; 

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

導(dǎo)出 (Exporting)

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

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

var something =true; 
export { something }; 

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

export { something as somethingElse }; 

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

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

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

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

exportdefault something; 

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

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