1.什么是模塊化
模塊化是指把一個(gè)復(fù)雜的系統(tǒng)分解到一個(gè)一個(gè)的模塊牧抵，再用一定的方式拼裝起來帅刊。
2.模塊化開發(fā)的優(yōu)點(diǎn)
(1)一個(gè)單獨(dú)的文件就是一個(gè)模塊，是一個(gè)單獨(dú)的作用域吱涉，只向外暴露特定的變量和函數(shù)逛薇。這樣可以避免污染全局變量捺疼，減少變量命名沖突。
(2)代碼復(fù)用永罚，讓我們更方便地進(jìn)行代碼管理啤呼、同時(shí)也便于后面代碼的修改和維護(hù)议薪。
3.js模塊化規(guī)范
Js模塊化規(guī)范有：CommonJS、AMD媳友、CMD斯议、以及本文要總結(jié)的ES6的模塊系統(tǒng)。
其中醇锚，CommonJS是服務(wù)端的模塊規(guī)范哼御，AMD和CMD是瀏覽器端的模塊規(guī)范。
CommonJS加載模塊是“運(yùn)行時(shí)加載”：CommonJS的模塊就是對(duì)象焊唬，導(dǎo)入時(shí)恋昼，實(shí)際是整體加載模塊的所有方法，生成一個(gè)對(duì)象赶促，然后再?gòu)倪@個(gè)對(duì)象讀取對(duì)應(yīng)的方法液肌。因?yàn)橹挥羞\(yùn)行時(shí)才能得到這個(gè)對(duì)象，導(dǎo)致完全沒辦法在編譯時(shí)做“靜態(tài)優(yōu)化”鸥滨。
ES6加載模塊是“編譯時(shí)加載”嗦哆。ES6模塊不是對(duì)象，導(dǎo)入時(shí)只加載指定的方法婿滓，其他方法不加載老速。這種加載稱為“編譯時(shí)加載”或者靜態(tài)加載，即 ES6 可以在編譯時(shí)就完成模塊加載凸主，效率要比 CommonJS 模塊的加載方式高橘券，并使得靜態(tài)分析成為可能。當(dāng)然卿吐，這也導(dǎo)致了沒法引用 ES6 模塊本身旁舰，因?yàn)樗皇菍?duì)象。
關(guān)于模塊化的更多內(nèi)容嗡官，可以看下之前我總結(jié)的一覽js模塊化：從CommonJS到ES6
導(dǎo)出的語(yǔ)法
(1) 導(dǎo)出的基本語(yǔ)法箭窜、導(dǎo)出時(shí)重命名
export關(guān)鍵字，可以導(dǎo)出變量谨湘、函數(shù)绽快、類給其他模塊芥丧。
as關(guān)鍵字紧阔，可以指定變量、函數(shù)续担、類在模塊外應(yīng)該被稱為什么名稱擅耽。
// 導(dǎo)出變量–寫法1
export let name = “Peter”;
// 導(dǎo)出變量–寫法2：先定義，再導(dǎo)出
let name = “Peter”;
export { name }
// 導(dǎo)出變量–寫法3：重命名
let name = “Peter”;
export { name as PersonName}
這里export時(shí)記得加花括號(hào)物遇，不加則會(huì)報(bào)錯(cuò)乖仇。
// 導(dǎo)出函數(shù)–寫法1
export function sum(a, b) {
return a + b;
}
// 導(dǎo)出函數(shù)–寫法2：先定義憾儒、再導(dǎo)出
function sum(a, b) {
return a + b;
}
export { sum };
// 導(dǎo)出函數(shù)–寫法3：重命名
function sum(a, b) {
return a + b;
}
export { sum as add };
(1)模塊是自動(dòng)運(yùn)行在嚴(yán)格模式下、并且無(wú)法退出運(yùn)行的js代碼乃沙。
即ES6 的模塊是自動(dòng)采用嚴(yán)格模式起趾，不管有沒有在模塊頭部加上"use strict";
(2)在ES6的模塊中，在模塊頂層創(chuàng)建的變量只在模塊的頂層作用域中存在警儒，不會(huì)自動(dòng)被添加到全局作用域中训裆。
(3)在模塊頂層，this的值是undefined蜀铲，即不要在頂層代碼使用this边琉。
(4)模塊不支持HTML風(fēng)格的代碼注釋。
type=“module”
