ES6模塊化是什么？怎樣導(dǎo)入和執(zhí)行模塊中的代碼？

在 ES6 模塊化規(guī)范誕生之前，JavaScript 社區(qū)已經(jīng)嘗試并提出了 AMD、CMD、CommonJS 等模塊化規(guī)范。但是，這些由社區(qū)提出的模塊化標(biāo)準(zhǔn)，還是存在一定的差異性與局限性、并不是瀏覽器與服務(wù)器通用的模塊化標(biāo)準(zhǔn)，例如：

①AMD 和 CMD 適用于瀏覽器端的 Javascript 模塊化

②CommonJS 適用于服務(wù)器端的 Javascript 模塊化

太多的模塊化規(guī)范給開(kāi)發(fā)者增加了學(xué)習(xí)的難度與開(kāi)發(fā)的成本。因此，大一統(tǒng)的 ES6 模塊化規(guī)范誕生了!

ES6 模塊化規(guī)范是瀏覽器端與服務(wù)器端通用的模塊化開(kāi)發(fā)規(guī)范。它的出現(xiàn)極大的降低了前端開(kāi)發(fā)者的模塊化學(xué)習(xí)成本，開(kāi)發(fā)者不需再額外學(xué)習(xí) AMD、CMD 或 CommonJS 等模塊化規(guī)范。

ES6 模塊化規(guī)范中每個(gè) js 文件都是一個(gè)獨(dú)立的模塊，導(dǎo)入其它模塊成員需要使用 import 關(guān)鍵字，向外共享模塊成員使用 export 關(guān)鍵字。

在node.js中我們可以體驗(yàn)ES6模塊化：

node.js 中默認(rèn)僅支持 CommonJS 模塊化規(guī)范，若想基于node.js 體驗(yàn)與學(xué)習(xí) ES6 的模塊化語(yǔ)法，可以按照如下兩個(gè)步驟進(jìn)行配置：

① 確保安裝了 v14.15.1 或更高版本的 node.js

② 在 package.json 的根節(jié)點(diǎn)中添加 "type": "module" 節(jié)點(diǎn)

默認(rèn)導(dǎo)出的語(yǔ)法： export default 默認(rèn)導(dǎo)出的成員，導(dǎo)出語(yǔ)法如以下文件所示：

letn1=10//定義模塊私有成員n1
let n2 = 20 //定義模塊私有成員n2 (外界訪問(wèn)不到n2, 因?yàn)樗鼪](méi)有被共享出去)
function show() {} //定義模塊私有方法show
[]
export default { //使用export default 默認(rèn)導(dǎo)出語(yǔ)法，向外共享n1和show 兩個(gè)成員
n1,
show
}

默認(rèn)導(dǎo)入的語(yǔ)法： import 接收名稱 from '模塊標(biāo)識(shí)符'，導(dǎo)入語(yǔ)法如以下文件所示：

//從01_ _m1.js 模塊中導(dǎo)入export default 向外共享的成員
//并使用m1成員進(jìn)行接收
import m1 from ' ./01_ m1.js'

//打印輸出的結(jié)果為:
//{n1:10，show: [Function: show] }
console. log(m1 )

注意事項(xiàng)：
在默認(rèn)導(dǎo)出中每個(gè)模塊，只允許使用唯一的一次 export default，否則會(huì)報(bào)錯(cuò)!示例代碼如下以下文件：

letn1=10//定義模塊私有成員n1
let n2 = 20 //定義模塊私有成員n2 (外界訪問(wèn)不到n2,因?yàn)樗鼪](méi)有被共享出去)
function show() {} /1定義模塊私有方法show

export default { //使用export default 默認(rèn)導(dǎo)出語(yǔ)法，向外共享n1和show 兩個(gè)成員
n1,
show
}
// SyntaxError: Identifier ' .default' has already been declared 
export default {
n2
}

默認(rèn)導(dǎo)入時(shí)的接收名稱可以任意名稱，只要是合法的成員名稱即可，示例代碼如下：

// m1是合法的名稱
// import m1 from './01_ m1.js '

// 123m 不是合法的名稱，因?yàn)槌蓡T名稱不能以數(shù)字開(kāi)頭
import 123m from ' ./01 m1.js '

按需導(dǎo)出的語(yǔ)法： export 按需導(dǎo)出的成員，導(dǎo)出語(yǔ)法如以下文件所示：

 //當(dāng)前模塊為03_ m2.js

 //向外按需導(dǎo)出變量s1
exportlets1='aaa
 //向外按需導(dǎo)出變量s2
 export let s2 = 'CCC '
 //向外按需導(dǎo)出方法say
 export function say() {}

按需導(dǎo)入的語(yǔ)法： import { s1 } from '模塊標(biāo)識(shí)符'，導(dǎo)入語(yǔ)法如以下文件所示：

//導(dǎo)入模塊成員
import { s1, s2, say } from ' ./03_ m2.js '

console.log(s1) //打印輸出aaa
console. log(s2) // 打印輸出CCC
console.log(say) //打印輸出[Function: say]

按需導(dǎo)出與按需導(dǎo)入的注意事項(xiàng)：

①每個(gè)模塊中可以使用多次按需導(dǎo)出

②按需導(dǎo)入的成員名稱必須和按需導(dǎo)出的名稱保持一致

③按需導(dǎo)入時(shí)，可以使用 as 關(guān)鍵字進(jìn)行重命名

④按需導(dǎo)入可以和默認(rèn)導(dǎo)入一起使用
如果只想單純地執(zhí)行某個(gè)模塊中的代碼，并不需要得到模塊中向外共享的成員。此時(shí)，可以直接導(dǎo)入并執(zhí)行模塊代碼，示例代碼如下：

//當(dāng)前文件模塊為05_ m3.js

//在當(dāng)前模塊中執(zhí)行一個(gè) for 循環(huán)操作
for(let i=0; i<3; i++) {
  console.log(i)
}

//-----------------分割線-----------------

//直接導(dǎo)入并執(zhí)行模塊代碼，不需要得到模塊向外共享的成員

import ' ./05_ m3.js'

猜你喜歡：

gzip模塊啟用和配置指令詳解

網(wǎng)頁(yè)模塊命名規(guī)范【HTML網(wǎng)頁(yè)制作教程】

Nginx服務(wù)器版本升級(jí)和新增模塊教程

傳智教育web前端與移動(dòng)開(kāi)發(fā)培訓(xùn)班