? 一.模塊化(module)開發(fā)

? 模塊化開發(fā)不是js業(yè)務(wù)邏輯，工作中維護(hù)和開發(fā)js代碼的一種方式

? 關(guān)注的是開發(fā)過程中減少代碼的沖突和依賴

? 沖突：同事間的代碼不再覆蓋，不再相互影響...

? 依賴：通過js文件看到彼此的依賴(相互引用)，開發(fā)過程中彼此引用同事的代碼或者工具...

? 上面的加載方式都不能解決沖突和依賴，引入模塊化的概念

? 二.模塊化的意義(解決沖突依賴)

? 歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個(gè)大程序拆分成互相依賴的小文件，再用簡(jiǎn)單的方法拼裝起來

? 在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。

? ES6 在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡(jiǎn)單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。

? 三.學(xué)習(xí)ES6里面的模塊化開發(fā)，徹底解決沖突和依賴

? 1.定義模塊(導(dǎo)出模塊)：必須導(dǎo)出模塊才能給其它同事使用，自己復(fù)用

? 2.調(diào)用模塊(導(dǎo)入模塊)：導(dǎo)入自己或者同事提供的模塊，方便開發(fā)

? 3.配置模塊(路徑問題)：調(diào)用模塊的路徑配置(./當(dāng)前目錄 ?../上一級(jí)目錄 ?/根目錄)

? 四.定義模塊(導(dǎo)出模塊)

? 1.export導(dǎo)出多個(gè)內(nèi)容

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

? 2.export default 暴露一個(gè)變量或者函數(shù)，調(diào)用的時(shí)候自定義名稱，一個(gè)模塊只能有一個(gè)默認(rèn)輸出，因此export default命令只能使用一次。

? 五.調(diào)用模塊(導(dǎo)入模塊)

? import

? 利用import關(guān)鍵字導(dǎo)入模塊

? 語法：import {} ?from './js模塊的路徑.js'

? 注意這里的(./)表示當(dāng)前的模塊來自本地，不是第三方的，這就是配置模塊

? 六.HTML頁面加載模塊化文件的規(guī)則

? 瀏覽器加載 ES6 模塊，也使用script標(biāo)簽，但是要加入type="module"屬性。

? 使用靜態(tài)服務(wù)器預(yù)覽(live Server)

? 如果網(wǎng)頁有多個(gè)script type="module"，它們會(huì)按照在頁面出現(xiàn)的順序依次執(zhí)行。