模塊化演變歷程

程序模塊化開發的優點
+ 開發效率高
* 代碼方便重用，別人開發的模塊直接拿過來就可以使用，不需要重複開發類似的功能
+ 可維護性高
* 軟件的聲明週期中最長的階段其實並不是開發階段，而是維護階段，
需求變更比較頻繁，使用模塊化的開發方式更容易維護

（一：演變歷程）
1,全局函數
人爲模塊

 function sum(a,b){
            return parseInt(a) + parseInt(b);
        }

2，對象封裝-命名空間法

 var obj = {};
        // obj.cal = {};
        // obj.cal.sum = function(){};
        // obj.cal.sum();
        obj.sum = function(a,b){
            return parseInt(a) + parseInt(b);
        }

3，公有私有成員分離

// 這裏就形成了一個隔離環境
            // 隔離公有私有成員之後，降低了對全局作用域的污染，進一步降低了命名衝突的概率
var module = (function(){
             var obj = {};
            obj.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
            return obj;
       })();

4，增強可維護可擴展性

  // 通過參數的形式劃分了子模塊，進一步增強了模塊的可維護和可擴展性
   // 開閉原則：對修改封閉，對添加開放
var module = (function(m){
            m.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
            return m;
       })(module || {});

5，添加第三方依賴

var module = (function(m,$){
            m.sum = function(a,b){
                return parseInt(a) + parseInt(b);
            }
             m.mod = function(a,b){
                $("#container").css('backgroundColor','lightblue');
                showInfo();
                return parseInt(a) % parseInt(b);
            }
            return m;
       })(module || {},jQuery);

（二：規範化標準）

CMD – seaJS 中國用的比較多，由阿里的玉伯

AMD – requireJS

commonJS

使用seajs的步驟：

• 引入seajs
• 如何定義模塊
  
  • define // 參數的名字不允許修改，參數可以是多個
  • define(function(require, exports, module){});

• 如何公開模塊成員

  • exports

  • seajs.use兩個參數
    - 模塊的路徑
    - seajs.use兩個參數

        - 模塊的路徑
        - 回調函數 -- 回調函數的參數指成的是exports
    

• 如何依賴模塊
  
  • require()

Seajs模塊定義參數分析

• exports 與 module.exports
  
  • 它們兩個實際上是一個對象
  • exports 對外提供接口
  • module.exports 對外提供了整個接口
• require
  
  • 加載外部的模塊
  • require 是一個方法，接受模塊標識作爲唯一參數，用來獲取其他模塊提供的接口
• exports
  
  • exports 是一個對象，用來向外提供模塊接口。
• module
  
  • module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。
• module有幾種屬性和方法
  
  • module.id(模塊id，就是全路徑了，一般情況下（沒有在 define 中手寫 id 參數時），module.id 的值就是 module.uri，兩者完全相同。)
  • module.exports(對外接口，{}格式，exports 僅僅是 module.exports 的一個引用。)
  • module.dependencies(數組，當前模塊依賴的模塊)

exports 與 module.exports 的區別
其實，Module.exports纔是真正的接口，exports只不過是它的一個輔助工具。
最終返回給調用的是Module.exports而不是exports。
所有的exports收集到的屬性和方法，都賦值給了Module.exports。
當然，這有個前提，就是Module.exports本身不具備任何屬性和方法。
如果，Module.exports已經具備一些屬性和方法，那麼exports收集來的信息將被忽略

• 如果導出的是單個成員，那麼一般使用exports.成員名稱 這種形式導出
• 如果導出的是一個對象，那麼一般使用module.exports這種形式導出

Seajs異步加載模塊
require.async(“模塊地址”,function(){})

Seajs依賴jQuery

• 如何設置jQuery依賴

jQ結尾處：

if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
        if ( typeof define === "function" ) {
            define(function(){return jQuery});
        }
    }

• seaJS如何配置參數

seajs.config({
        alias : {
            jquery : "jquery-1.11.1.js"
        }
    })

Seajs模塊加載原理分析
/@cc_on ….. @/之間的部分可以被ie識別並作爲程序執行，同時啓用ie的條件編譯

CMD、AMD、ConmonJS的區別

- AMD
    + 預加載，預執行
    + 預加載就是把所有的 js 文件模塊都下載下來
    + 預執行就是把每個加載成功一個執行一個


- CMD
    + 預加載，懶執行
    + 預加載就是把所有的 js 文件模塊都下載下來
    + 懶執行就是等所有的js文件都加載完畢之後了纔去執行


- ConmonJS
    + 執行到了哪裏，就加載到哪裏，然後執行哪裏，
    + 同步加載，同步執行