模塊的寫(xiě)法
一谱邪、原始寫(xiě)法
function m1(){
//...
}
function m2(){
//...
}
二炮捧、對(duì)象寫(xiě)法
var module1 = new Object({
_count : 0,
m1 : function (){
//...
},
m2 : function (){
//...
}
});
上面的函數(shù)m1()和m2(），都封裝在module1對(duì)象里惦银。使用的時(shí)候咆课，就是調(diào)用這個(gè)對(duì)象的屬性末誓。
module1.m1();
但是，這樣的寫(xiě)法會(huì)暴露所有模塊成員书蚪，內(nèi)部狀態(tài)可以被外部改寫(xiě)喇澡。比如，外部代碼可以直接改變內(nèi)部計(jì)數(shù)器的值
module1._count = 5;
三殊校、立即執(zhí)行函數(shù)寫(xiě)法
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
使用上面的寫(xiě)法晴玖，外部代碼無(wú)法讀取內(nèi)部的_count變量。
console.info(module1._count); //undefined
四为流、放大模式
如果一個(gè)模塊很大呕屎，必須分成幾個(gè)部分，或者一個(gè)模塊需要繼承另一個(gè)模塊艺谆，這時(shí)就有必要采用"放大模式"（augmentation）榨惰。
var module1 = (function (mod){
mod.m3 = function () {
//...
};
return mod;
})(module1);
面的代碼為module1模塊添加了一個(gè)新方法m3()，然后返回新的module1模塊静汤。
五琅催、寬放大模式（Loose augmentation）
在瀏覽器環(huán)境中，模塊的各個(gè)部分通常都是從網(wǎng)上獲取的虫给，有時(shí)無(wú)法知道哪個(gè)部分會(huì)先加載藤抡。如果采用上一節(jié)的寫(xiě)法，第一個(gè)執(zhí)行的部分有可能加載一個(gè)不存在空對(duì)象抹估，這時(shí)就要采用"寬放大模式"缠黍。
var module1 = ( function (mod){
//...
return mod;
})(window.module1 || {});
與"放大模式"相比，＂寬放大模式＂就是"立即執(zhí)行函數(shù)"的參數(shù)可以是空對(duì)象药蜻。
六瓷式、輸入全局變量
獨(dú)立性是模塊的重要特點(diǎn)，模塊內(nèi)部最好不與程序的其他部分直接交互语泽。
為了在模塊內(nèi)部調(diào)用全局變量贸典，必須顯式地將其他變量輸入模塊。
var module1 = (function ($, YAHOO) {
//...
})(jQuery, YAHOO);
上面的module1模塊需要使用jQuery庫(kù)和YUI庫(kù)踱卵，就把這兩個(gè)庫(kù)（其實(shí)是兩個(gè)模塊）當(dāng)作參數(shù)輸入module1廊驼。這樣做除了保證模塊的獨(dú)立性，還使得模塊之間的依賴(lài)關(guān)系變得明顯惋砂。
AMD規(guī)范
因?yàn)橛辛四K妒挎，我們就可以更方便地使用別人的代碼，想要什么功能西饵，就加載什么模塊酝掩。
但是，這樣做有一個(gè)前提眷柔，那就是大家必須以同樣的方式編寫(xiě)模塊庸队，否則你有你的寫(xiě)法积蜻，我有我的寫(xiě)法，豈不是亂了套彻消！考慮到Javascript模塊現(xiàn)在還沒(méi)有官方規(guī)范竿拆，這一點(diǎn)就更重要了。
目前宾尚，通行的Javascript模塊規(guī)范共有兩種：CommonJS和AMD丙笋。我主要介紹AMD，但是要先從CommonJS講起
CommonJS
node.js的模塊系統(tǒng)煌贴，就是參照CommonJS規(guī)范實(shí)現(xiàn)的御板。在CommonJS中，有一個(gè)全局性方法require()牛郑，用于加載模塊怠肋。假定有一個(gè)數(shù)學(xué)模塊math.js，就可以像下面這樣加載淹朋。
var math = require('math');
var math = require('math');
math.add(2,3); // 5
因?yàn)檫@個(gè)系列主要針對(duì)瀏覽器編程笙各，不涉及node.js，所以對(duì)CommonJS就不多做介紹了础芍。我們?cè)谶@里只要知道杈抢，require()用于加載模塊就行了。
瀏覽器環(huán)境
有了服務(wù)器端模塊以后仑性，很自然地惶楼，大家就想要客戶(hù)端模塊。而且最好兩者能夠兼容诊杆，一個(gè)模塊不用修改歼捐，在服務(wù)器和瀏覽器都可以運(yùn)行。
但是晨汹，由于一個(gè)重大的局限豹储，使得CommonJS規(guī)范不適用于瀏覽器環(huán)境。還是上一節(jié)的代碼宰缤，如果在瀏覽器中運(yùn)行，會(huì)有一個(gè)很大的問(wèn)題晃洒，你能看出來(lái)嗎慨灭？
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3)，在第一行require('math')之后運(yùn)行球及，因此必須等math.js加載完成氧骤。也就是說(shuō)，如果加載時(shí)間很長(zhǎng)吃引，整個(gè)應(yīng)用就會(huì)停在那里等筹陵。
這對(duì)服務(wù)器端不是一個(gè)問(wèn)題刽锤，因?yàn)樗械哪K都存放在本地硬盤(pán)，可以同步加載完成朦佩，等待時(shí)間就是硬盤(pán)的讀取時(shí)間并思。但是，對(duì)于瀏覽器语稠，這卻是一個(gè)大問(wèn)題宋彼，因?yàn)槟K都放在服務(wù)器端，等待時(shí)間取決于網(wǎng)速的快慢仙畦，可能要等很長(zhǎng)時(shí)間输涕，瀏覽器處于"假死"狀態(tài)。
因此慨畸，瀏覽器端的模塊莱坎，不能采用"同步加載"（synchronous），只能采用"異步加載"（asynchronous）寸士。這就是AMD規(guī)范誕生的背景檐什。
AMD
AMD是"Asynchronous Module Definition"的縮寫(xiě)，意思就是"異步模塊定義"碉京。它采用異步方式加載模塊厢汹，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴(lài)這個(gè)模塊的語(yǔ)句谐宙，都定義在一個(gè)回調(diào)函數(shù)中烫葬，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行凡蜻。
AMD也采用require()語(yǔ)句加載模塊搭综，但是不同于CommonJS，它要求兩個(gè)參數(shù)：
require([module], callback);
第一個(gè)參數(shù)[module]划栓，是一個(gè)數(shù)組兑巾，里面的成員就是要加載的模塊；第二個(gè)參數(shù)callback忠荞，則是加載成功之后的回調(diào)函數(shù)蒋歌。如果將前面的代碼改寫(xiě)成AMD形式，就是下面這樣：
require(['math'], function (math) {
math.add(2, 3);
});
math.add()與math模塊加載不是同步的委煤，瀏覽器不會(huì)發(fā)生假死堂油。所以很顯然，AMD比較適合瀏覽器環(huán)境碧绞。
目前府框，主要有兩個(gè)Javascript庫(kù)實(shí)現(xiàn)了AMD規(guī)范：require.js和curl.js。本系列的第三部分讥邻，將通過(guò)介紹require.js迫靖，進(jìn)一步講解AMD的用法院峡，以及如何將模塊化編程投入實(shí)戰(zhàn)。
require.js的用法
為什么要用require.js系宜？
最早的時(shí)候照激，所有Javascript代碼都寫(xiě)在一個(gè)文件里面，只要加載這一個(gè)文件就夠了蜈首。后來(lái)实抡，代碼越來(lái)越多，一個(gè)文件不夠了欢策，必須分成多個(gè)文件吆寨，依次加載。下面的網(wǎng)頁(yè)代碼踩寇，相信很多人都見(jiàn)過(guò)啄清。
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script src="4.js"></script>
<script src="5.js"></script>
<script src="6.js"></script>
這段代碼依次加載多個(gè)js文件。
這樣的寫(xiě)法有很大的缺點(diǎn)俺孙。首先辣卒，加載的時(shí)候，瀏覽器會(huì)停止網(wǎng)頁(yè)渲染睛榄，加載文件越多荣茫，網(wǎng)頁(yè)失去響應(yīng)的時(shí)間就會(huì)越長(zhǎng)；其次场靴，由于js文件之間存在依賴(lài)關(guān)系啡莉，因此必須嚴(yán)格保證加載順序（比如上例的1.js要在2.js的前面），依賴(lài)性最大的模塊一定要放到最后加載旨剥，當(dāng)依賴(lài)關(guān)系很復(fù)雜的時(shí)候咧欣，代碼的編寫(xiě)和維護(hù)都會(huì)變得困難。
require.js的誕生轨帜，就是為了解決這兩個(gè)問(wèn)題：
（1）實(shí)現(xiàn)js文件的異步加載魄咕，避免網(wǎng)頁(yè)失去響應(yīng)；
（2）管理模塊之間的依賴(lài)性蚌父，便于代碼的編寫(xiě)和維護(hù)哮兰。
require.js的加載
使用require.js的第一步，是先去官方網(wǎng)站下載最新版本苟弛。
下載后喝滞，假定把它放在js子目錄下面，就可以加載了
<script src="js/require.js"></script>
有人可能會(huì)想到嗡午，加載這個(gè)文件囤躁，也可能造成網(wǎng)頁(yè)失去響應(yīng)冀痕。解決辦法有兩個(gè)荔睹，一個(gè)是把它放在網(wǎng)頁(yè)底部加載狸演，另一個(gè)是寫(xiě)成下面這樣：
<script src="js/require.js" defer async="true" ></script>
async屬性表明這個(gè)文件需要異步加載，避免網(wǎng)頁(yè)失去響應(yīng)僻他。IE不支持這個(gè)屬性宵距，只支持defer，所以把defer也寫(xiě)上吨拗。
加載require.js以后满哪，下一步就要加載我們自己的代碼了。假定我們自己的代碼文件是main.js劝篷，也放在js目錄下面哨鸭。那么，只需要寫(xiě)成下面這樣就行了：
<script src="js/require.js" data-main="js/main"></script>
data-main屬性的作用是娇妓，指定網(wǎng)頁(yè)程序的主模塊像鸡。在上例中，就是js目錄下面的main.js哈恰，這個(gè)文件會(huì)第一個(gè)被require.js加載只估。由于require.js默認(rèn)的文件后綴名是js，所以可以把main.js簡(jiǎn)寫(xiě)成main着绷。
主模塊的寫(xiě)法
上一節(jié)的main.js蛔钙，我把它稱(chēng)為"主模塊"，意思是整個(gè)網(wǎng)頁(yè)的入口代碼荠医。它有點(diǎn)像C語(yǔ)言的main()函數(shù)吁脱，所有代碼都從這兒開(kāi)始運(yùn)行。
主模塊依賴(lài)于其他模塊子漩，這時(shí)就要使用AMD規(guī)范定義的的require()函數(shù)豫喧。
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
require()函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)組幢泼，表示所依賴(lài)的模塊紧显，上例就是['moduleA', 'moduleB', 'moduleC']，即主模塊依賴(lài)這三個(gè)模塊缕棵；第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)孵班，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用招驴。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)篙程，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊。
require()異步加載moduleA别厘，moduleB和moduleC虱饿，瀏覽器不會(huì)失去響應(yīng)；它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后氮发，才會(huì)運(yùn)行渴肉，解決了依賴(lài)性的問(wèn)題。
下面爽冕，我們看一個(gè)實(shí)際的例子仇祭。
假定主模塊依賴(lài)jquery、underscore和backbone這三個(gè)模塊颈畸，main.js就可以這樣寫(xiě)：
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require.js會(huì)先加載jQuery乌奇、underscore和backbone，然后再運(yùn)行回調(diào)函數(shù)眯娱。主模塊的代碼就寫(xiě)在回調(diào)函數(shù)中礁苗。
模塊的加載
上一節(jié)最后的示例中，主模塊的依賴(lài)模塊是['jquery', 'underscore', 'backbone']徙缴。默認(rèn)情況下寂屏，require.js假定這三個(gè)模塊與main.js在同一個(gè)目錄，文件名分別為jquery.js娜搂，underscore.js和backbone.js迁霎，然后自動(dòng)加載。
使用require.config()方法百宇，我們可以對(duì)模塊的加載行為進(jìn)行自定義考廉。require.config()就寫(xiě)在主模塊（main.js）的頭部。參數(shù)就是一個(gè)對(duì)象携御，這個(gè)對(duì)象的paths屬性指定各個(gè)模塊的加載路徑昌粤。
require.config({
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
上面的代碼給出了三個(gè)模塊的文件名，路徑默認(rèn)與main.js在同一個(gè)目錄（js子目錄）啄刹。如果這些模塊在其他目錄涮坐，比如js/lib目錄，則有兩種寫(xiě)法誓军。一種是逐一指定路徑袱讹。
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
另一種則是直接改變基目錄（baseUrl）。
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js要求昵时，每個(gè)模塊是一個(gè)單獨(dú)的js文件捷雕。這樣的話(huà)，如果加載多個(gè)模塊壹甥，就會(huì)發(fā)出多次HTTP請(qǐng)求救巷，會(huì)影響網(wǎng)頁(yè)的加載速度。因此句柠，require.js提供了一個(gè)優(yōu)化工具浦译，當(dāng)模塊部署完畢以后棒假，可以用這個(gè)工具將多個(gè)模塊合并在一個(gè)文件中，減少HTTP請(qǐng)求數(shù)精盅。
AMD模塊的寫(xiě)法
require.js加載的模塊淆衷，采用AMD規(guī)范。也就是說(shuō)渤弛，模塊必須按照AMD的規(guī)定來(lái)寫(xiě)。
具體來(lái)說(shuō)甚带，就是模塊必須采用特定的define()函數(shù)來(lái)定義她肯。如果一個(gè)模塊不依賴(lài)其他模塊，那么可以直接定義在define()函數(shù)之中鹰贵。
假定現(xiàn)在有一個(gè)math.js文件晴氨，它定義了一個(gè)math模塊。那么碉输，math.js就要這樣寫(xiě)：
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加載方法
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果這個(gè)模塊還依賴(lài)其他模塊籽前，那么define()函數(shù)的第一個(gè)參數(shù)，必須是一個(gè)數(shù)組敷钾，指明該模塊的依賴(lài)性枝哄。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
當(dāng)require()函數(shù)加載上面這個(gè)模塊的時(shí)候，就會(huì)先加載myLib.js文件阻荒。
加載非規(guī)范的模塊
理論上挠锥，require.js加載的模塊，必須是按照AMD規(guī)范侨赡、用define()函數(shù)定義的模塊蓖租。但是實(shí)際上，雖然已經(jīng)有一部分流行的函數(shù)庫(kù)（比如jQuery）符合AMD規(guī)范羊壹，更多的庫(kù)并不符合蓖宦。那么，require.js是否能夠加載非規(guī)范的模塊呢油猫？
回答是可以的稠茂。
這樣的模塊在用require()加載之前，要先用require.config()方法，定義它們的一些特征。
舉例來(lái)說(shuō)憔恳，underscore和backbone這兩個(gè)庫(kù)令宿，都沒(méi)有采用AMD規(guī)范編寫(xiě)。如果要加載它們的話(huà)宙址，必須先定義它們的特征。
require.config({
shim: {
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require.config()接受一個(gè)配置對(duì)象，這個(gè)對(duì)象除了有前面說(shuō)過(guò)的paths屬性之外藐不，還有一個(gè)shim屬性，專(zhuān)門(mén)用來(lái)配置不兼容的模塊。具體來(lái)說(shuō)雏蛮，每個(gè)模塊要定義（1）exports值（輸出的變量名）涎嚼，表明這個(gè)模塊外部調(diào)用時(shí)的名稱(chēng)；（2）deps數(shù)組挑秉，表明該模塊的依賴(lài)性法梯。
比如，jQuery的插件可以這樣定義：
shim: {
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
require.js插件
require.js還提供一系列插件犀概，實(shí)現(xiàn)一些特定的功能立哑。
domready插件，可以讓回調(diào)函數(shù)在頁(yè)面DOM結(jié)構(gòu)加載完成后再運(yùn)行姻灶。
require(['domready!'], function (doc){
// called once the DOM is ready
});
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
require() 源碼解讀
瀏覽器加載 CommonJS 模塊的原理與實(shí)現(xiàn)
AMD與CMD的區(qū)別
AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出铛绰。CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。類(lèi)似的還有 CommonJS Modules/2.0 規(guī)范产喉，是 BravoJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出捂掰。還有不少??這些規(guī)范的目的都是為了 JavaScript 的模塊化開(kāi)發(fā)，特別是在瀏覽器端的曾沈。目前這些規(guī)范的實(shí)現(xiàn)都能達(dá)成瀏覽器端模塊化開(kāi)發(fā)的目的这嚣。區(qū)別：1. 對(duì)于依賴(lài)的模塊，AMD 是提前執(zhí)行塞俱，CMD 是延遲執(zhí)行疤苹。不過(guò) RequireJS 從 2.0 開(kāi)始，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同敛腌，處理方式不同）卧土。CMD 推崇 as lazy as possible.2. CMD 推崇依賴(lài)就近，AMD 推崇依賴(lài)前置像樊∮容海看代碼：// CMDdefine(function(require, exports, module) { var a = require('./a') a.doSomething() // 此處略去 100 行 var b = require('./b') // 依賴(lài)可以就近書(shū)寫(xiě) b.doSomething() // ... })// AMD 默認(rèn)推薦的是define(['./a', './b'], function(a, b) { // 依賴(lài)必須一開(kāi)始就寫(xiě)好 a.doSomething() // 此處略去 100 行 b.doSomething() ...}) 雖然 AMD 也支持 CMD 的寫(xiě)法，同時(shí)還支持將 require 作為依賴(lài)項(xiàng)傳遞生棍，但 RequireJS 的作者默認(rèn)是最喜歡上面的寫(xiě)法颤霎，也是官方文檔里默認(rèn)的模塊定義寫(xiě)法。
require.js案例
main.js
require.config({
paths: {
"m1": "m1",
"underscore": "m2",
"backbone": "m3"
}
});
require(['m1', 'underscore', 'backbone'], function(m0, m2, m3) {
console.log(m0)
console.log(m2)
console.log(m3)
console.log( m0.add(1,2) )
console.log( m2.remove(3) )
console.log( m3.getname(5) )
})
m1.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
m2.js
define(function (){
var remove = function (x){
return x;
};
return {
remove: remove
};
});
m3.js
define(['m4'], function (m4){
var getname = function (x){
return m4.setname;
};
return {
getname: getname
};
});
m4.js
define(function (){
var setname = function (x){
return x
};
return {
setname: setname
};
});
sea.js
main.js
define(function(require) {
var m1 = require("./m1.js")
var m2 = require("./m2.js")
console.log(m1) //{getName , setName }
console.log(m2) //{a, aa}
})
m1.js
define(function(require, exports) {
var m3 = require("./m3.js")
exports.getName = function() {
return m3.getName
}
exports.setName = function(str) {
return str
}
})
m2.js
define(function(require, exports) {
var m3 = require("./m3.js")
var a = 'cxh'
console.log(m3) // {getName }
return {
a: a,
aa: m3.getName
}
})
m3.js
define(function(require, exports) {
exports.getName = function(str) {
return str
}
})
