模塊化是一個通用的編程最佳實踐。程式的模塊化使我們可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊，從而提高代碼的利用效率，增加開發速度。 模塊就像積木，有了它，我們可以搭出各種各種功能樣式的程式。積木有什麼特點？小而簡單。同樣的，我們程式中的模塊也要做到這一點，確保自己創建的函數一次只完成 ...
模塊化是一個通用的編程最佳實踐。程式的模塊化使我們可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊，從而提高代碼的利用效率，增加開發速度。
模塊就像積木，有了它，我們可以搭出各種各種功能樣式的程式。積木有什麼特點？小而簡單。同樣的，我們程式中的模塊也要做到這一點，確保自己創建的函數一次只完成一個工作，這樣其他開發者可以簡單地調試與修改你的代碼，而不需瀏覽所有代碼才能弄清每一個代碼塊執行了什麼功能。只有做到像這樣地小而簡單，才能實現其通用功能。
javascript模塊化的方法
函數封裝
JavaScript的作用域就是基於函數的，所以我們可以把函數作為模塊。
function fn1(){
//code
}
function fn2(){
//code
}缺點："污染"了全局變數，無法保證不與其他模塊發生變數名衝突
對象
var myModule1 = {
fn1: function(){
//code
},
fn2: function(){
//code
}
}缺點：會暴露所有模塊成員，內部狀態可以被外部改寫
立即自執行函數——推薦
var myModule = (function(){
function fn1(){
//code
},
function fn2(){
//code
},
return {
fn1: fn1,
fn2: fn2
};
})();小而簡單
關於小而簡單，我們看一個例子，比如我們現在想編寫一個創建新鏈接的函數，並且為類型是"mailto"超鏈接添加一個class。可以這樣做：
function addLink(text, url, parentElement) {
var newLink = document.createElement('a');//創建a標簽
newLink.setAttribute('href', url);//為a標簽設置href屬性
newLink.appendChild(document.createTextNode(text));//為a標簽添加文本
if(url.indexOf("mailto:")==-1){
newLink.className = 'mail';
}
parentElement.appendChild(newLink);//將a標簽添加到頁面
}這樣寫能夠工作，但你或許會發現自己又不得進行其他的功能添加，於是，這個函數又不適用了。所以，函數越特殊，越難以適用於不同情形。
這裡的函數寫法沒有達到模塊化的要求——一個函數只乾一件事。我們將函數改編下：
function createLink(text,url) {
var newLink = document.createElement('a');
newLink.setAttribute('href', url);
newLink.appendChild(document.createTextNode(text));
return newLink;
}這裡createLink函數只做一件事——創建並返回要添加到頁面中的a標簽（小而簡單），這樣我們就可以在任何需要創建超鏈接的情況下調用這樣函數。
CommonJS
在瀏覽器環境下，沒有模塊也不是特別大的問題，畢竟網頁程式的複雜性有限；但是在伺服器端，一定要有模塊與操作系統和其他應用程式互動，否則根本沒法編程。雖然JavaScript在web端發展這麼多年，但是第一個流行的模塊化規範卻由伺服器端的JavaScript應用帶來，CommonJS規範是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞臺。
node.js的模塊系統，就是依據CommonJS規範實現的。在CommonJS中，有一個全局性方法require()，用於載入模塊。
載入模塊：
var math = require('math');調用模塊：
math.add(2,3)CommonJS規範不適用於瀏覽器環境，因為它存在一個重大的局限，上例中第二行math.add(2, 3)必須要在math.js載入完成後才能運行，而模塊都放在伺服器端，所以可能要等很長時間，等待時間取決於網速的快慢。
CommonJS規範適用於伺服器端，因為對於服務端來說，所有的模塊都存放在本地硬碟，可以同步載入完成，等待時間就是硬碟的讀取時間
模塊應該怎麼定義和怎麼載入?
AMD
Asynchronous Module Definition非同步模塊定義,主要代表：require.js
目的：
（1）實現js文件的非同步載入，避免網頁失去響應；
（2）管理模塊之間的依賴性，便於代碼的編寫和維護。
定義模塊
define(["./cart", "./inventory"], function(cart, inventory) { //通過[]引入依賴 return { color: "blue", size: "large", addToCart: function() { inventory.decrement(this); cart.add(this); } } } );載入模塊
require( ["some/module", "my/module", "a.js", "b.js"], function(someModule, myModule) { //This function will be called when all the dependencies //listed above are loaded. Note that this function could //be called before the page is loaded. //This callback is optional. } );
CMD
Common Module Definition通用模塊定義，CMD規範是國內發展出來的。主要代表：sea.js
定義模塊
define(function(require, exports, module) { // 通過 require 引入依賴 var $ = require('jquery'); var Spinning = require('./spinning'); // 通過 exports 對外提供介面 exports.doSomething = ... // 或者通過 module.exports 提供整個介面 module.exports = ... });載入模塊
seajs.use("../static/hello/src/main")
區別：
對於依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
CMD 推崇依賴就近，AMD 推崇依賴前置。
我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/
如果覺得本文不錯的話，幫忙點擊下麵的推薦哦,謝謝！
