模組化開發，一個模組就是一個實現特定功能的檔案，有了模組我們就可以更方便的使用別人的程式碼，要用什麼功能就載入什麼模組。

模組化開發的4點好處：

　　1 避免變數汙染，命名衝突

　　2  提高程式碼複用率

　　3 提高維護性

　　4 依賴關係的管理

前端模組化規範從原始野蠻階段現在慢慢進入“文藝復興”時代，實現的過程如下：

一 函式封裝

我們在講到函式邏輯的時候提到過，函式一個功能就是實現特定邏輯的一組語句打包，在一個檔案裡面編寫幾個相關函式就是最開始的模組了

　　function m1(){
　　　　//...
　　}

　　function m2(){
　　　　//...
　　}

這樣做的缺點很明顯，汙染了全域性變數，並且不能保證和其他模組起衝突，模組成員看起來似乎沒啥關係

二 物件

為了解決這個問題，有了新方法，將所有模組成員封裝在一個物件中

var module = new Object({

   _count:0,

   m1:function (){  ```  },

   m2:function (){   ```  }                
  
})    

這樣 兩個函式就被包在這個物件中， 嘿嘿 看起來沒毛病是嗎 繼續往下：

當我們要使用的時候，就是呼叫這個物件的屬性

module.m1()

誒嘿 那麼問題來了 這樣寫法會暴露全部的成員，內部狀態可以被外部改變，比如外部程式碼可直接改變計數器的值

//壞人的操作

module._count = 10;

最後的最後，聰明的人類找到了究極新的方法——立即執行函式，這樣就可以達到不暴露私有成員的目的

var module = (function (){

    var _count = 5;
     
    var m1 = function (){  ```   };

    var m2 = function (){  ```   };

    return{
         m1:m1,
         m2:m2
    }

})()    

以上就是模組化開發的基礎中的基礎，以後會說道其他更深層次的模組化開發。

接下來了解一下兩種模組化規範。

先了解一下commonJS。

commonJS由nodeJS發揚光大，這標誌著js模組化正式登場。

一 定義模組

根據commonJS規範，一個單獨的檔案是一個模組，每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非為global物件的屬性。

二 模組輸出 

模組只有一個出口，module.exports物件，我們需要把模組希望輸出的內容放入該物件。

三 載入模組

載入模組用require方法，該方法讀取一個檔案並且執行，返回檔案內部的module.exports物件。

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();

AMD

Asynchronous Module Definition，中文名是一步模組。它是一個在瀏覽器端模組化開發的規範，由於不是js原生支援，使用AMD規範進行頁面開發需要用到對應的函式庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程中對模組定義的規範化的產出。

requireJS主要解決兩個問題：

1 多個js檔案可能有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器。

2 js載入的時候瀏覽器會停止頁面渲染，載入檔案愈多，頁面失去響應的時間愈長。

//定義模組

define(['dependency'],function(){
  
  var name = 'Byron';
  function printName(){
     console.log(name);
}
  
  return {
     printName:printName
   }

})

//載入模組

require(['myModule'],function(my){
   my.printName();
})

語法：

requireJS定義了一個函式define，它是全域性變數，用來定義模組。

define(id,dependencies,factory)

——id  可選引數，用來定義模組的標識，如果沒有提供該引數，指令碼檔名（去掉拓展名）

——dependencies  是一個當前模組用來的模組名稱陣列

——factory 工廠方法，模組初始化要執行的函式或物件，如果為函式，它應該只被執行一次，如果是物件，此物件應該為模組的輸出值。

在頁面上使用require函式載入模組；
require([dependencies], function(){});
require()函式接受兩個引數：
——第一個引數是一個數組，表示所依賴的模組；
——第二個引數是一個回撥函式，當前面指定的模組都載入成功後，它將被呼叫。載入的模組會以引數形式傳入該函式，從而在回撥函式內部就可以使用這些模組

AMD推崇的是依賴前置，被提前羅列出來並會背提前下載並執行，後來做了改進，可以不用羅列依賴模組，允許在回撥函式中就近使用require引入並下載執行模組。

CMD

即common module definition

就像AMD有個requireJS,CMD有個瀏覽器實現的sea.js，sj要解決的問題和rj一樣，只不過在模組定義方式和模組載入時機上有所不同。

cmd是sea.js在推廣過程中的規範化產出，sea.js是另一種前端模組化工具，它的出現緩解了requireJS的幾個痛點。

define(id, deps, factory)

因為CMD推崇一個檔案一個模組，所以經常就用檔名作為模組id；
CMD推崇依賴就近，所以一般不在define的引數中寫依賴，而是在factory中寫。

factory有三個引數：
function(require, exports, module){}

一，require
require 是 factory 函式的第一個引數，require 是一個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面；

二，exports
exports 是一個物件，用來向外提供模組介面；

三，module
module 是一個物件，上面儲存了與當前模組相關聯的一些屬性和方法。

demo
// 定義模組  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 載入模組
seajs.use(['myModule.js'], function(my){

});

AMD與CMD區別

總結如下：

最明顯的區別就是在模組定義時對依賴的處理不同。

AMD推崇依賴前置 在定義模組的時候就有宣告其依賴的模組

CMD推崇就近依賴 只有在用到某模組的時候再去require

AMD和CMD最大的區別是對依賴模組的執行時機處理不同，注意不是載入的時機或者方式不同。

很多人說requireJS是非同步載入模組，SeaJS是同步載入模組，這麼理解實際上是不準確的，其實載入模組都是非同步的，只不過AMD依賴前置，js可以方便知道依賴模組是誰，立即載入，而CMD就近依賴，需要使用把模組變為字串解析一遍才知道依賴了那些模組，這也是很多人詬病CMD的一點，犧牲效能來帶來開發的便利性，實際上解析模組用的時間短到可以忽略。
為什麼我們說兩個的區別是依賴模組執行時機不同，為什麼很多人認為ADM是非同步的，CMD是同步的（除了名字的原因。。。）
同樣都是非同步載入模組，AMD在載入模組完成後就會執行改模組，所有模組都載入執行完後會進入require的回撥函式，執行主邏輯，這樣的效果就是依賴模組的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴載入完成後才執行。
CMD載入完某個依賴模組後並不執行，只是下載而已，在所有依賴模組載入完成後進入主邏輯，遇到require語句的時候才執行對應的模組，這樣模組的執行順序和書寫順序是完全一致的。
這也是很多人說AMD使用者體驗好，因為沒有延遲，依賴模組提前執行了，CMD效能好，因為只有使用者需要的時候才執行的原因。