摘要：前言很久沒寫文章總結了，這次主要粗略的總結一下中的模塊化模塊模塊的職責封裝實現，暴露接口，聲明依賴。

前言：很久沒寫文章總結了，這次主要粗略的總結一下 js中的模塊化

模塊的職責：封裝實現，暴露接口，聲明依賴。先來一個對比，下面代碼沒有應用任何模塊系統

math.js:(1)沒有封裝性（2）接口不明顯

    function add(a,b){
        return a+ b
    }
    function sub(a,b){
        return a - b
    }

caculator.js:(1)依賴math.js但是沒有依賴聲明 （2）使用全局狀態

    var action = "add";
    function compute(a,b){
        switch (action){
            case "add": return add(a,b)
            case "sub": return add(a,b)
        }
    }

math.js:(1)結構性好（2）訪問控制沒有

    var math = {
        add:function add(a,b){
            return a+ b
        },
        sub:function sub(a,b){
            return a - b
        }
    }

caculator.js:(1)依賴math.js但是沒有依賴聲明 （2）無法標明屬性是私有，無封裝

    var caculator = {
        action:"add";
        compute:function compute(a,b){
            switch (action){
                case "add": return math.add(a,b)
                case "sub": return math.add(a,b)
            }
        }
    }

可以創建一個局部作用域，封裝內部成員變量，通過return輸出需要輸出的接口

版本一：caculator－1.js:(1)實現了訪問控制（2）依然沒有依賴聲明

    var caculator = (function(){
        var action = "add";
        return{
        compute:function compute(a,b){
            switch (action){
                case "add": return math.add(a,b)
                case "sub": return math.add(a,b)
            }
        }
    }
})()

版本二：caculator－2.js:(1)顯示依賴聲明（2）仍然污染了全局變量（3）必須手動進行依賴管理
揭露模塊模式：return部分與版本一不太一樣，把方法定義在函數體里面，return的只是方法。具體可參考這位童鞋的文章：Javascript 設計模式 -- Revealing Module（揭示模塊）模式

    var caculator = (function(m){
        var action = "add";
        function compute(a,b(){
            switch (action){
                case "add": return m.add(a,b)
                case "sub": return m.add(a,b)
            }
        }
        return{
            compute:compute
    }
})(math)

解決暴露全局變量的問題，只暴露一個類似namespace的全局變量就實現所有模塊的聲明

math.js:(1)第一個參數是模塊聲明；（2）第二個參數是聲明依賴，目前是沒有依賴的；（3）第三個參數是模塊的構成

    namespace("math",[],function(){
        function add(a,b){
            return a+ b
        }
        function sub(a,b){
            return a - b
        }
        return{
            add:add,
            sub:sub
        }
    })

caculator.js:(1)有依賴生命（2）依賴math被當做參數傳入

    namespace("caculator",["math"],function(m){
        var action = "add"
        function compute(a,b){
            return m[action](a,b)
        }
        return{
            compute:compute
        }
    })

namespace的代碼：還是沒有解決依賴管理的問題，如果各個模塊分散在不同的文件中，就要對腳本加載順序進行手動的排序

    var namespace = (function(){
        //緩存所有的模塊
        var cache = {}
        function createModule(name,deps,definition){  //參數是：模塊名，依賴列表，定義
            //先對參數進行判斷，如果只有一個參數，就返回
            if(arguments.length === 1){
                return cache[name]
            }
            //必須取得所有依賴的模塊，要保證前面的模塊已經被定義好了
            deps = deps.map(function(depName){
                return ns(depName)
            })
            //初始化模塊并返回
            cache[name] = definition.apply(null,deps)
            return cache[name];
        }
        return createModule
    })()

職責：（1）依賴管理：加載／分析／注入／初始化 （2）決定模塊的寫法
下面總結三種典型的模塊系統的寫法

優點：

依賴管理成熟可靠

社區活躍，規范接受度高

運行時支持，模塊定義非常簡單

文件級別的模塊作用域隔離

可以處理循環依賴

缺點：

不是標準組織的規范

同步的require，沒有考慮瀏覽器異步加載的過程

但是還是有辦法使用的，目前有很多工具可以把多個模塊的文件打包成一個文件：browserify,webpack,component

看下面用commonjs寫就的代碼：
math.js:

    function add(a,b){
        return a+ b
    }
    function sub(a,b){
        return a - b
    }
    exports.add = add
    exports.sub = sub

caculator.js:

       var math = require("./math");  //依賴聲明
        function Caculator(container){
            this.left = container.querySelector(".j-left" );
            this.right = container.querySelector(".j-right" );
            this.add = container.querySelector(".j-add" );
            this.result = container.querySelector(".j-result");
            
            this.add.addEventListener("click",this.compute.bind(this));
        }
        Caculator.prototype.compute = function(){
            this.result.textContent = math.add(+this.left.value, +this.right.value)
        }
        exports.Caculator = Caculator;  //暴露接口

用前端打包工具進行打包math.js 和caculator.js
首先安裝browserify，在命令行輸入命令：browserify caculator.js > caculator-bundle.js
打包成形如命名空間的文件形式

天然的作用于異步環境
AMD代碼寫法：
math.js:第一個參數是依賴列表

    define([],function(){
        function add(a,b){
            return a+ b
        }
        function sub(a,b){
            return a - b
        }
        return{  //接口暴露
            add:add,
            sub:sub
        }
    })

caculator.js:參數一是依賴聲明，參數二是依賴注入

    define(["./math"],function(math){
    
        function Caculator(container){
                this.left = container.querySelector(".j-left" );
                this.right = container.querySelector(".j-right" );
                this.add = container.querySelector(".j-add" );
                this.result = container.querySelector(".j-result");
                
                this.add.addEventListener("click",this.compute.bind(this));
            }
            Caculator.prototype.compute = function(){}
            return{
                Caculator:Caculator
            }
        })

AMD還支持一個叫Simplified CommonJS wrapping

    define（function(require,exports){
        var math = require("./math");
        function Caculator(container){
                this.left = container.querySelector(".j-left" );
                this.right = container.querySelector(".j-right" );
                this.add = container.querySelector(".j-add" );
                this.result = container.querySelector(".j-result");
                
                this.add.addEventListener("click",this.compute.bind(this));
            }
            Caculator.prototype.compute = function(){}
            exports.Caculator = Caculator;
        })

上述如何獲取依賴列表呢？
函數通過toString可以打印出它的函數體，然后用正則表達式提取出來
factory.toString()
/require([""]([^""]*)[""])/.exec(factory.toString())[1]

優點：

依賴管理成熟可靠

社區活躍，規范接受度高

專為異步IO打造，適合瀏覽器環境

支持類似Commonjs的書寫方式

通過插件api可支持加載非js資源

成熟的打包構建工具，并可結合插件

缺點：

模塊定義繁瑣，需要額外嵌套

只是庫級別的支持，需要引入額外的庫

無法處理循環依賴

無法實現條件加載

語言級別的支持，未來的模塊化