前端模組化

函式封裝

函式一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函式的，所以把函式作為模組化的第一步是很自然的事情，在一個檔案裡面編寫幾個相關函式就是最開始的模組

示例一：

function fn1(){
    ...
}
function fn2(){
    ...
}

// 缺點：汙染全域性變數，可能發生變數名衝突，模組成員之間沒聯絡。

物件

為了解決上面問題，物件的寫法應運而生，可以把所有的模組成員封裝在一個物件中

示例二：

var myModule = {
    var1: 1,
    var2: 2,
    fn1: function(){
        ...
    },
    fn2: function(){
        ...
    }
}

// 呼叫：
myModule.fn2();
// 缺陷：外部可以隨意修改內部成員，會產生意外的安全問題
myModule.var1 = 100;

立即執行函式

示例三：

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    function fn1(){
        ...
    }
    function fn2(){
        ...
    }
    return {
        fn1: fn1,
        fn2: fn2
    }
})();

放大模式和寬放大模式

放大模式

var myModule = (function(mod){
    mod.fn3 = function(){
        ...
    };
    return mod;
})(module1);

上面的程式碼為module1模組添加了一個新方法m3()，然後返回新的module1模組。

寬放大模式
在瀏覽器環境中，模組的各個部分通常都是從網上獲取的，有時無法知道哪個部分會先載入。如果採用上一節的寫法，第一個執行的部分有可能載入一個不存在空物件，這時就要採用"寬放大模式"。

var myModule = (function(mod){
    ...
    return mod;
})(window.module1 || {});

與"放大模式"相比，＂寬放大模式＂就是"立即執行函式"的引數可以是空物件。

示例六

var myModule = (function($,Angular){
    ...
})(jQuery,Angular);

模組的規範
先想一想，為什麼模組很重要？
因為有了模組，我們就可以更方便地使用別人的程式碼，想要什麼功能，就載入什麼模組。
但是，這樣做有一個前提，那就是大家必須以同樣的方式編寫模組，否則你有你的寫法，我有我的寫法，豈不是亂了套！考慮到Javascript模組現在還沒有官方規範，這一點就更重要了。
目前，通行的Javascript模組規範共有兩種：CommonJS 和 AMD。

CommonJs

1. 定義模組
   根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非定義為global（全域性）物件的屬性
2. 模組輸出
   模組只有一個出口，module.exports物件，我們需要把模組希望輸出的內容放入該物件
3. 載入模組
   載入模組使用require方法，該方法讀取一個檔案並執行，返回檔案內部的module.exports物件

示例：

// 模組定義 myModel.js
var name = 'xxx';
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();

不同的實現對require時的路徑有不同要求，一般情況可以省略js拓展名，可以使用相對路徑，也可以使用絕對路徑，甚至可以省略路徑直接使用模組名（前提是該模組是系統內建模組）

AMD

AMD 即Asynchronous Module Definition，中文名是非同步模組定義的意思。它是一個在瀏覽器端模組化開發的規範

由於不是JavaScript原生支援，使用AMD規範進行頁面開發需要用到對應的庫函式，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模組定義的規範化的產出

requireJS主要解決兩個問題：

1. 多個js檔案可能有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器
2. js載入的時候瀏覽器會停止頁面渲染，載入檔案越多，頁面失去響應時間越長

一個使用requireJS的例子

// 定義模組 myModule.js
define(['dependency'],function(){
    var name = 'xxx';
    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()函式在載入依賴的函式的時候是非同步載入的，這樣瀏覽器不會失去響應，它指定的回撥函式，只有前面的模組都載入成功後，才會執行，解決了依賴性的問題。

CMD

CMD 即Common Module Definition通用模組定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模組定義方式和模組載入（可以說執行、解析）時機上有所不同

語法：
Sea.js 推崇一個模組一個檔案，遵循統一的寫法
define(id,deps,factory)
因為CMD推崇 1. 一個檔案一個模組，所以經常就用檔名作為模組id
2. CMD推崇依賴就近，所以一般不在define的引數中寫依賴，在factory中寫

factory有三個引數
function(require,exports,module)
// require 是 factory 函式的第一個引數
// require 是一個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面
require(id)

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

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

一個示例：
// 定義模組 myModule.js

define(function(require,exports,module){
   var $ = require('jquery.js');
   $('div').addClass('active'); 
});

seajs.use(['myModule.js'],function(my){
    ...
});

AMD與CMD區別

1. AMD推崇依賴前置，在定義模組的時候就要宣告其依賴的模組
2. CMD推崇就近依賴，只有在用到某個模組的時候再去require
   這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支援對方的寫法

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

很多人說requireJS是非同步載入模組，SeaJS是同步載入模組，這麼理解實際上是不準確的，其實載入模組都是非同步的，只不過AMD依賴前置，js可以方便知道依賴模組是誰，立即載入，而CMD就近依賴，需要使用把模組變為字串解析一遍才知道依賴了那些模組，這也是很多人詬病CMD的一點，犧牲效能來帶來開發的便利性，實際上解析模組用的時間短到可以忽略

同樣都是非同步載入模組，AMD在載入模組完成後就會執行該模組，所有模組都載入執行完後會進入require的回撥函式，執行主邏輯，這樣的效果就是依賴模組的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴載入完成後才執行

CMD載入完某個依賴模組後並不執行，只是下載而已，在所有依賴模組載入完成後進入主邏輯，遇到require語句的時候才執行對應的模組，這樣模組的執行順序和書寫順序是完全一致的

這也是很多人說AMD使用者體驗好，因為沒有延遲，依賴模組提前執行了，CMD效能好，因為只有使用者需要的時候才執行的原因