1.模塊化開發規范
JavaScript中所有對象的屬性都是公共的，並沒有什么明確的方法來表明屬性能否從對象的外部被訪問，而有時候我們並不希望對象的屬性被外界訪問。一種方式方式通過命名約定的形式，比如在變量的前面加下划線（_）。還有一些其他的方式是屬性完全私有化。
2.為什么要模塊化
在模塊化沒有出現之前，我們JavaScript腳本大概是這樣的：
<script src="module1.js"></script> <script src="module2.js"></script> <script src="module3.js"></script> <script src="module4.js"></script> ....
但我們引入多個js文件時，會存在一些問題：
- 把所有的代碼放到全局環境會引起沖突
- 各個腳本必須按照嚴格的依賴順序放置
- 在大型的項目中，可能會引入很多的js腳本，
script就會變得很多，並且難以維護。
為了解決這些問題，涌現了各種模塊化的方案。
3.模塊化的方式
這種方式是創建對象的一種方法，用於創建具有私有屬性的對象。基本思路是使用一個立即執行的函數表達式，返回一個對象。該函數表達式可以包含任意數量的局部變量，這些變量從函數的外部是無法訪問到的。因為返回的對象是在自執行函數內部聲明的，所以對象中定義的方法可以訪問自執行函數內的局部變量，這些方法被具有特權的方法。
var p2 = (function(){
var money = 30000;
return {
name: 'lisi',
sayMoney: function(){
return money;
}
};
}());
4. CommonJS
我們在前端的js代碼在沒有模塊化之前也能正常執行，但是在服務器端的js腳本必須要被模塊化才能正常工作。所以雖然JavaScript在前端發展了這么多年，第一個流行的模塊化規范卻是由服務器端的js應用發展起來的。CommonJS規范是由NodeJS發揚光大的。
- 定義模塊
在CommonJS規范中，一個單獨的JS文件就是一個模塊。每個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性。
- 模塊輸出
模塊只有一個出口，module.exports對象，我們需要把需要輸出的內容放入該模塊
- 加載模塊
加載模塊使用require()方法，該方法讀取一個文件並執行，返回文件內部的module.exprots對象
例如，我們寫了這樣一個文件myModule1.js：
var name = '無忌';
function sayName(){
console.log(name);
};
function sayFullName(firstName){
console.log(firstName + name);
};
module.exports = {
printName:sayName,
printFullName:sayFullName
};
我們的模塊定義好了，那我們怎樣使用這個模塊呢？例如，我們創建了myModule2.js文件：
var module1 = require('./myModule1.js');
module1.printName();
module1.printFullName('張');
在node環境下，require方法在引入其他模塊的時候是同步的，可以輕松的控制模塊的引入順序，保證了模塊之間的依賴順序。但是在瀏覽器中卻不是這樣的，因為我們的<script>標簽天生異步，在加載js文件的時候是異步的，也就意味着不能保證模塊之間的正確依賴。
5. AMD規范
AMD即Asynchronous Module Definition，異步模塊定義。它是在瀏覽器端實現模塊化開發的規范。由於該規范不是JavaScript原始支持的，使用AMD規范進行開發的時候需要引入第三方的庫函數，也就是鼎鼎大名的RequireJS。
RequireJS主要解決兩個問題：
- 多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器。
-
js加載的時候瀏覽器會停止頁面渲染，加載的文件越多，頁面失去響應的時間越長。
-
定義模塊
RequireJS定義了一個define函數，用來定模塊。
define(id, [dependencies], factory);
- id：可選參數，用來定義模塊的標識，如果沒有提供參數的話，默認為文件的名字。
- dependencies：當前模塊依賴的其他模塊，數組。
- factory：工廠方法，初始化模塊需要執行的函數或對象。如果為函數，它只被執行一次。如果是對象，此對象會作為模塊的輸出值。
// amdModule1.js
define('amdModule1',[],function(){
console.log('模塊一');
var name= '張三';
var money = 1000;
var sayName = function(){
return name;
}
var sayMoney = function(){
return money;
}
return {
sayName:sayName,
sayMoney:sayMoney
}
})
// module2.js
define('amdModule2',['amdModule1'],function(amdModule1){
console.log('模塊二');
var name = '李四';
var weight = 80;
var sayName = function(){
return amdModule1.sayName();
}
var sayWeight = function(){
return weight;
}
return {
sayWeight:sayWeight,
name:name,
sayName:sayName
};
})
- 在頁面中加載模塊
加載模塊需要使用require()函數。
require([dependencies], function(){});
- dependencies：該參數是一個數組，表示所依賴的模塊。
- function：這是一個回調函數，當所依賴的模塊都加載成功之后，將調用該回調方法。依賴的模塊會以參數的形式傳入該函數，從而在回調函數內部就可以使用這些模塊。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="require.js"></script> <script type="text/javascript" src="amdModule1.js"></script> <script type="text/javascript" src="amdModule2.js"></script> <script type="text/javascript"> require(['amdModule1','amdModule2'],function(amdModule1,amdModule2){ console.log(amdModule1.sayName()); //張三 console.log(amdModule1.name); //undefined console.log(amdModule2.sayName()); //張三 console.log(amdModule2.sayWeight()); //80 }); </script> </body> </html>
require()函數在加載依賴的模塊時，是異步加載的，這樣瀏覽器就不會失去響應，回調函數只有在所依賴的全部模塊都被被成功加載之后才執行，因此，解決了依賴性的問題。
6. CMD規范
CMD即Common Module Definition通用模塊定義。它解決的問題和AMD規范是一樣的，只不過在模塊定義方式和模塊加載時機上不同。CMD也需要額外的引入第三方的庫文件，SeaJS。
SeaJS推崇一個模塊一個文件，遵循統一的寫法：
define(id, dependencies, factory);
因為CMD推崇一個文件一個模塊，所以經常使用文件名作為模塊的ID；CMD推崇就近原則，所以一般不再define的參數中寫依賴，在factory函數中寫。
- require：我們定義的模塊可能會依賴其他模塊，這個時候就可使用require()引入依賴。
- exports：等價於module.exports，只是為了方便我們使用
- module.exports：用於存放模塊需要暴露的屬性
- 定義模塊
// cmdModule1.js
define(function(require,exports,module){
var name = '張三';
function sayName(){
return name;
}
module.exports={
sayName:sayName
}
})
// cmdModule2.js
define(function(require,exports,module){
var cmdModule1 = require('cmdModule1.js');
console.log('模塊');
function sayName(){
return cmdModule1.sayName();
}
module.exports={
sayName:sayName
}
})
- 使用模塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="sea.js"></script> <script src="cmdModule2.js"></script> <script src="cmdModule1.js"></script> <script type="text/javascript"> seajs.use(['cmdModule2.js','cmdModule1.js'],function(cmdModule2,cmdModule1){ console.log(cmdModule2.sayName()); console.log(cmdModule1.sayName()); }) </script> </body> </html>
7. AMD和CMD規范的區別
AMD在加載模塊完成后會立即執行該模塊，所有的模塊都加載完成后執行require方法中的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網速，誰先下載下來，誰先執行，但是我們的主邏輯一定是在所有的依賴模塊都被加載完成后才執行。
CMD加載完某個模塊的時候並不執行，只是把它們下載下來而已，在所有的模塊下載完成后，當使用require請求某個模塊的時候，才執行對應的模塊。