什么是模塊化奇瘦？
1，把你的代碼寫(xiě)成模塊的
2劲弦，把這單獨(dú)的模塊寫(xiě)在單獨(dú)的文件里
模塊化有什么好處耳标？
1，讓代碼更清晰
2邑跪，讓合作更方便
目前次坡，通行的JavaScript模塊規(guī)范主要有三種：CommonJS纲仍、AMD和CMD
CommonJS
我們先從CommonJS談起，因?yàn)樵诰W(wǎng)頁(yè)端沒(méi)有模塊化編程只是頁(yè)面JavaScript邏輯復(fù)雜贸毕，但也可以工作下去郑叠，在服務(wù)器端卻一定要有模塊，所以雖然JavaScript在web端發(fā)展這么多年明棍，第一個(gè)流行的模塊化規(guī)范卻由服務(wù)器端的JavaScript應(yīng)用帶來(lái)乡革，CommonJS規(guī)范是由NodeJS發(fā)揚(yáng)光大，這標(biāo)志著JavaScript模塊化編程正式登上舞臺(tái)摊腋。
1沸版、定義模塊 根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊兴蒸。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域视粮，也就是說(shuō)，在該模塊內(nèi)部定義的變量橙凳，無(wú)法被其他模塊讀取蕾殴，除非定義為global對(duì)象的屬性
2、模塊輸出： 模塊只有一個(gè)出口岛啸，module.exports對(duì)象钓觉，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象
3、加載模塊： 加載模塊使用require方法坚踩，該方法讀取一個(gè)文件并執(zhí)行荡灾，返回文件內(nèi)部的module.exports對(duì)象
看個(gè)例子
//模塊定義 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
}
//加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
不同的實(shí)現(xiàn)對(duì)require時(shí)的路徑有不同要求，一般情況可以省略js拓展名瞬铸，可以使用相對(duì)路徑批幌，也可以使用絕對(duì)路徑，甚至可以省略路徑直接使用模塊名（前提是該模塊是系統(tǒng)內(nèi)置模塊）
AMD
AMD 即Asynchronous Module Definition嗓节，中文名是異步模塊定義的意思荧缘。它是一個(gè)在瀏覽器端模塊化開(kāi)發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁(yè)面開(kāi)發(fā)需要用到對(duì)應(yīng)的庫(kù)函數(shù)赦政，也就是大名鼎鼎RequireJS胜宇，實(shí)際上AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個(gè)問(wèn)題
1、多個(gè)js文件可能有依賴關(guān)系恢着，被依賴的文件需要早于依賴它的文件加載到瀏覽器
2桐愉、js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多掰派，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)
看一個(gè)使用requireJS的例子
// 定義模塊 myModule.js
define(['dependency'], function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName: printName
};
});
// 加載模塊
require(['myModule'], function (my){
my.printName();
});
在頁(yè)面上使用require函數(shù)加載模塊
require([dependencies], function(){});
require()函數(shù)接受兩個(gè)參數(shù)
1从诲、第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊
2靡羡、第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)系洛，當(dāng)前面指定的模塊都加載成功后俊性，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)描扯，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時(shí)候是異步加載的定页，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)绽诚，只有前面的模塊都加載成功后典徊，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題恩够。
CMD
CMD 即Common Module Definition通用模塊定義，CMD規(guī)范是國(guó)內(nèi)發(fā)展出來(lái)的蜂桶，就像AMD有個(gè)requireJS儡毕，CMD有個(gè)瀏覽器的實(shí)現(xiàn)SeaJS，SeaJS要解決的問(wèn)題和requireJS一樣扑媚，只不過(guò)在模塊定義方式和模塊加載（可以說(shuō)運(yùn)行腰湾、解析）時(shí)機(jī)上有所不同
語(yǔ)法
Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫(xiě)法
define
define(id?, deps?, factory)
因?yàn)镃MD推崇
1钦购、一個(gè)文件一個(gè)模塊檐盟，所以經(jīng)常就用文件名作為模塊id
2、CMD推崇依賴就近押桃，所以一般不在define的參數(shù)中寫(xiě)依賴，在factory中寫(xiě)
factory有三個(gè)參數(shù)
function(require, exports, module)
require(id)：require 是一個(gè)方法导犹，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)唱凯，用來(lái)獲取其他模塊提供的接口
exports：exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口
module：module 是一個(gè)對(duì)象谎痢，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法
例：
// 定義模塊 myModule.js
define(function(require, exports, module) {
var $ = require('jquery.js')
$('div').addClass('active');
});
// 加載模塊
seajs.use(['myModule.js'], function(my){
});
