模塊化主要是體現(xiàn)一種分而治之的思想，分而治之是軟件工程的重要思想虫给，是復(fù)雜系統(tǒng)開(kāi)發(fā)和維護(hù)的基石。模塊化則是前端最流行的分治手段咏窿。分而治之：將一個(gè)大問(wèn)題分解成多個(gè)較為獨(dú)立的與原問(wèn)題性質(zhì)相同的小問(wèn)題砖第，將所有的小問(wèn)題的解答組合起來(lái)即可得到大問(wèn)題的答案。
模塊化開(kāi)發(fā)的4點(diǎn)好處：
1 避免變量污染环凿，命名沖突
2 提高代碼復(fù)用率
3 提高維護(hù)性
4 依賴關(guān)系的管理
前端模塊化規(guī)范從原始野蠻階段現(xiàn)在慢慢進(jìn)入“文藝復(fù)興”時(shí)代梧兼，實(shí)現(xiàn)的過(guò)程如下：
一 函數(shù)封裝 : 在一個(gè)函數(shù)里面編寫(xiě)幾個(gè)函數(shù)是最開(kāi)始的模塊。
缺點(diǎn)：缺點(diǎn)很明顯智听，污染了全局變量羽杰，并且不能保證和其他模塊起沖突渡紫，模塊成員看起來(lái)似乎沒(méi)啥關(guān)系
二 對(duì)象 為了解決這個(gè)問(wèn)題，有了新方法考赛，將所有模塊成員封裝在一個(gè)對(duì)象中
var module = new Object({
_count:0,
m1:function (){ ``` },
m2:function (){ ``` }
})
這樣 兩個(gè)函數(shù)就被包在這個(gè)對(duì)象中惕澎，當(dāng)我們要使用的時(shí)候，就是調(diào)用這個(gè)對(duì)象的屬性
module.m1()
缺點(diǎn)： 這樣寫(xiě)法會(huì)暴露全部的成員颜骤，內(nèi)部狀態(tài)可以被外部改變唧喉，比如外部代碼可直接改變計(jì)數(shù)器的值
//壞人的操作
module._count = 10;
最后的最后，聰明的人類找到了究極新的方法——立即執(zhí)行函數(shù)忍抽，這樣就可以達(dá)到不暴露私有成員的目的
var module = (function (){
var _count = 5;
var m1 = function (){ ``` };
var m2 = function (){ ``` };
return{
m1:m1,
m2:m2
}
})()
以上就是模塊化開(kāi)發(fā)的基礎(chǔ)中的基礎(chǔ)八孝，以后會(huì)說(shuō)道其他更深層次的模塊化開(kāi)發(fā)。
接下來(lái)了解一下兩種模塊化規(guī)范鸠项。
commonJS
commonJS由nodeJS發(fā)揚(yáng)光大干跛，這標(biāo)志著js模塊化正式登場(chǎng)。
一 定義模塊
根據(jù)commonJS規(guī)范祟绊，一個(gè)單獨(dú)的文件是一個(gè)模塊楼入，每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)牧抽，在該模塊內(nèi)部定義的變量嘉熊，無(wú)法被其他模塊讀取，除非為global對(duì)象的屬性阎姥。
二 模塊輸出
模塊只有一個(gè)出口记舆，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象呼巴。
三 加載模塊
加載模塊用require方法泽腮，該方法讀取一個(gè)文件并且執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象衣赶。
模塊輸出：
var name = 'Byron';
function printName(){
console.log(name);
}
module.exports = {
printName: printName,
}
可以簡(jiǎn)寫(xiě)為：
module.exports = {
printName
}
然后加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
ES6模塊化
export default與export const的區(qū)別
一 export 用于在JavaScript模塊中導(dǎo)出函數(shù)诊赊，原始值，對(duì)象府瞄；即導(dǎo)出模塊碧磅，例如：
export （命名導(dǎo)出）
export {myFunction}; //命名導(dǎo)出函數(shù)
export const value=5; //命名導(dǎo)出原始值
export {object1, object2, ....}; //命名導(dǎo)出對(duì)象
命名導(dǎo)出可以導(dǎo)出多個(gè)值，但是導(dǎo)入時(shí)命名需要與導(dǎo)出命名相同遵馆。
每個(gè)文件可以有多個(gè)命名導(dǎo)出 export const鲸郊，然后將你要導(dǎo)入的名稱用{}（花括號(hào)）包住。
導(dǎo)出: export const num = 888
導(dǎo)入: import { num } from '模塊路徑'
1 導(dǎo)入內(nèi)容的時(shí)候,需要添加 {}
2 導(dǎo)入的內(nèi)容(num),必須是模塊導(dǎo)出的內(nèi)容(num).如果導(dǎo)入內(nèi)容與導(dǎo)出內(nèi)容不相同,那么,導(dǎo)入內(nèi)容為: undefined
3 export 不帶 default 可以出現(xiàn)任意多次
二 export default（默認(rèn)導(dǎo)出）
只能有一個(gè)默認(rèn)導(dǎo)出货邓；導(dǎo)入此類文件（模塊）時(shí)需要指定一個(gè)任何你喜歡的名稱即可秆撮。
導(dǎo)出：export default 要導(dǎo)出的內(nèi)容
導(dǎo)入：import a from '模塊路徑'
1 使用 export default 導(dǎo)出的內(nèi)容，在導(dǎo)入的時(shí)候换况，import后面的名稱可以是任意的
2 在一個(gè)模塊中 export default 語(yǔ)法只能使用一次
給導(dǎo)入的變量起別名（解決命名沖突）
import { num as bNum } from '模塊名稱'
一次性全部導(dǎo)入一個(gè)模塊中的內(nèi)容
import * as bModule from '模塊名稱'