1.概述

CommonJS 和 AMD 模塊，都只能在運(yùn)行時(shí)確定這些東西。比如，CommonJS 模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性

上面代碼的實(shí)質(zhì)是整體加載fs模塊（即加載fs的所有方法），生成一個(gè)對(duì)象（_fs），然后再?gòu)倪@個(gè)對(duì)象上面讀取3個(gè)方法(因?yàn)镃ommonJS是從運(yùn)行完成后的module.exports中加載的，所以只能在運(yùn)行時(shí)確定這些東西，而不是像ES6那樣在靜態(tài)的時(shí)候才確定)。這種加載稱為“運(yùn)行時(shí)加載”，因?yàn)橹挥羞\(yùn)行時(shí)才能得到這個(gè)對(duì)象，導(dǎo)致完全沒(méi)辦法在編譯時(shí)做“靜態(tài)優(yōu)化”

ES6 模塊不是對(duì)象，而是通過(guò)export命令顯式指定輸出的代碼，再通過(guò)import命令輸入

上面代碼的實(shí)質(zhì)是從fs模塊加載3個(gè)方法，其他方法不加載。這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載，即 ES6 可以在編譯時(shí)就完成模塊加載，效率要比 CommonJS 模塊的加載方式高

綜上：CommonJS是先加載整體，然后從整體中取出想要的方法。而ES6是直接加載模塊指定輸出的方法，其余方法不加載。CommonJS是require，ES6是export&import

2.ES6 模塊之中，頂層的this指向undefined，即不應(yīng)該在頂層代碼使用this

3.export命令

export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能

一個(gè)模塊就是一個(gè)獨(dú)立的文件。該文件內(nèi)部的所有變量，外部無(wú)法獲取。如果你希望外部能夠讀取模塊內(nèi)部的某個(gè)變量，就必須使用export關(guān)鍵字輸出該變量。

注意：這里變量之前必須帶有標(biāo)識(shí)符var，否則會(huì)報(bào)錯(cuò)

export的另外一種寫法

export命令除了輸出變量，還可以輸出函數(shù)或類（class）

export輸出的變量就是本來(lái)的名字，但是可以使用as關(guān)鍵字重命名

這里本來(lái)輸出函數(shù)本來(lái)的名字v1和v2，然后通過(guò)as關(guān)鍵字對(duì)其進(jìn)行了重新命名

需要特別注意的是，export命令規(guī)定的是對(duì)外的接口，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系

上面兩種寫法都會(huì)報(bào)錯(cuò)，因?yàn)闆](méi)有提供對(duì)外的接口。第一種寫法直接輸出1，第二種寫法通過(guò)變量m，還是直接輸出1。1只是一個(gè)值，不是接口。正確的寫法是下面這樣

上面三種寫法都是正確的，規(guī)定了對(duì)外的接口m。其他腳本可以通過(guò)這個(gè)接口，取到值1。它們的實(shí)質(zhì)是，在接口名與模塊內(nèi)部變量之間，建立了一一對(duì)應(yīng)的關(guān)系

同樣的，function和class的輸出，也必須遵守這樣的寫法

另外，export語(yǔ)句輸出的接口，與其對(duì)應(yīng)的值是動(dòng)態(tài)綁定關(guān)系，即通過(guò)該接口，可以取到模塊內(nèi)部實(shí)時(shí)的值

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz

最后，export命令可以出現(xiàn)在模塊的任何位置，只要處于模塊頂層就可以。如果處于塊級(jí)作用域內(nèi)，就會(huì)報(bào)錯(cuò)

上面代碼中，export語(yǔ)句放在函數(shù)之中，結(jié)果報(bào)錯(cuò)

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的ES6之Module的语法(1)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。