文章目錄

• 1. 模塊化的發(fā)展
• 2. export
• 3. as
• 4. export default
• 5. import

1. 模塊化的發(fā)展

隨著前端的發(fā)展，web技術(shù)日趨成熟，js功能越來越多，代碼量也越來越大。之前一個(gè)項(xiàng)目通常各個(gè)頁面公用一個(gè)js，但是js逐漸拆分，項(xiàng)目中引入的js越來越多. 在js模塊化誕生之前，開發(fā)者面臨很多問題:

• 全局變量污染：各個(gè)文件的變量都是掛載到window對象上，污染全局變量。
• 變量重名：不同文件中的變量如果重名，后面的會(huì)覆蓋前面的，造成程序運(yùn)行錯(cuò)誤。
• 文件依賴順序：多個(gè)文件之間存在依賴關(guān)系，需要保證一定加載順序問題嚴(yán)重。

模塊化是指解決一個(gè)復(fù)雜問題時(shí)自頂向下逐層把系統(tǒng)劃分成若干模塊的過程， 有多種屬性，分別反映其內(nèi)部特性。

模塊化其實(shí)是一種規(guī)范，一種約束，這種約束會(huì)大大提升開發(fā)效率。將每個(gè)js文件看作是一個(gè)模塊，每個(gè)模塊通過固定的方式引入，并且通過固定的方式向外暴露指定的內(nèi)容。 按照js模塊化的設(shè)想，一個(gè)個(gè)模塊按照其依賴關(guān)系組合，最終插入到主程序中。

我們梳理一下模塊化的發(fā)展情況：
無模塊化 > CommonJS規(guī)范 > AMD規(guī)范 > CMD規(guī)范 > ES6模塊化

CommonJS規(guī)范(Node中模塊化規(guī)范)的誕生給js模塊化發(fā)展有了重要的啟發(fā)，基于Node原生api在服務(wù)端可以實(shí)現(xiàn)模塊同步加載， 但是僅僅局限于服務(wù)端，客戶端如果同步加載依賴的話時(shí)間消耗非常大，所以需要一個(gè) 在客戶端上基于Commonjs但是對于加載模塊做改進(jìn)的方案，于是AMD規(guī)范誕生了。

AMD規(guī)范, 異步模塊定義, 允許指定回調(diào)函數(shù)，AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運(yùn)行。所有依賴這個(gè)模塊的語句，都定義在一個(gè)回調(diào)函數(shù)中，等到所有依賴加載完成之后（前置依賴），這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

CMD規(guī)范，同樣是受到Commonjs的啟發(fā)，國內(nèi)（阿里）誕生了一個(gè)CMD（Common Module Definition）規(guī)范。該規(guī)范借鑒了Commonjs的規(guī)范與AMD規(guī)范，在兩者基礎(chǔ)上做了改進(jìn)。CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

到了2015年，ES6規(guī)范中，終于將模塊化納入JavaScript標(biāo)準(zhǔn)，從此js模塊化被官方扶正，也是未來js的標(biāo)準(zhǔn). 在ES6中，我們可以使用 import 關(guān)鍵字引入模塊，通過 exprot 關(guān)鍵字導(dǎo)出模塊，功能較之于前幾個(gè)方案更為強(qiáng)大，也是我們所推崇的， 但是由于ES6目前無法在瀏覽器中執(zhí)行，所以，我們只能通過babel將不被支持的import編譯為當(dāng)前受到廣泛支持的 require。

2. export

模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

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

導(dǎo)出變量或者常量

export const name = 'hello' export let addr = 'BeiJing City' export var list = [1, 2, 3]// 或者 const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name,addr,list }

導(dǎo)出函數(shù)

export function say(content) {console.log(content) } export function run() {console.log('run') }// 或者 const say = (content) => {console.log(content) } let run = () => {console.log('run') } export {say,run }

導(dǎo)出Object對象

export ({code: 0,message: 'success' })// 或者 let data = {code: 0,message: 'success' } export {data }

導(dǎo)出 Class

class Test {constructor() {this.id = 2} } export {Test }// 或者 export class Test {constructor() {this.id = 2} }

3. as

如果想為輸入的變量重新取一個(gè)名字，import命令要使用as關(guān)鍵字，將輸入的變量重命名。

const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name as myName,addr as myAddr,list }

4. export default

使用import命令的時(shí)候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載。但是，用戶肯定希望快速上手，未必愿意閱讀文檔，去了解模塊有哪些屬性和方法。

為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認(rèn)輸出。

const name = 'hello' let addr = 'BeiJing City' var list = [1, 2, 3] export {name as myName,addr as myAddr } export default list

5. import

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個(gè)模塊。

// 直接導(dǎo)入 import list, {myName, myAddr} from A// 修改導(dǎo)入名稱 import list, {myName as name, myAddr} from A// 批量導(dǎo)入 import list, * as mod from A

總結(jié)

以上是生活随笔為你收集整理的【ES6(2015)】Module模块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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