JavaScript 子產品化程式設計随堂筆記

一 原始寫法

// 子產品就是實作特定功能的一組方法;隻要把不同的函數(以及記錄狀态的變量)簡單地放在一起,就算是一個子產品;

    function m1(){

        // ...

    }

    function m2(){

// 上面的函數m1()和m2(),組成一個子產品;使用時直接調用就行;

// 缺點:"污染"了全局變量; 無法保證不與其他子產品發生變量名沖突,而且子產品成員之間看不出直接關系;

二 對象寫法

// 把子產品寫成一個對象,所有的子產品成員都放到這個對象裡面CODEGO.NET;   var module = new Object({     _count:0,     m1:function(){       // ...     },     m2:function(){       // ...     }   }); // 上面的函數m1()和m2(),都封裝在module對象裡;使用時直接調用這個對象的屬性;   module.m1(); // 但是,這樣的寫法會暴露所有子產品成員,内部狀态可以被外部改寫;   module._count = 4; 

三 立即執行函數寫法

  var module = (function(){     var _count = 0;     var m1 = function(){       // ...     };     var m2 = function(){       };     return {       m1:m1,       m2:m2     };   })(); // 使用上面的寫法,外部代碼無法讀取内部的_count變量;   console.info(module._count); // undefined; // 上面的寫法就是JavaScript子產品的基本寫法; 

四 放大模式

// 如果子產品很大,必須分成幾個部分,或者一個子產品需要繼承另一個子產品,這時就有必要采用"放大模式";   var module = (function(mod){     mod.m3 = function(){       // ...     };     return mod;   })(module); // 上面的代碼為module子產品添加了一個新方法m3(),然後傳回新的module子產品; 

五 寬放大模式

// 在浏覽器環境中,子產品的各個部分通常都是從網上擷取的,有時無法知道哪個部分會先加載; // 如果采用上一節的寫法,第一個執行的部分有可能加載一個不存在的空對象,這時就要采用"寬放大模式";   var module = (function(mod){     // ...     return mod;   })(window.module || {}); // 與"放大模式"相比,"寬放大模式"就是"立即執行函數"的參數可以是空對象; 

六 輸入全局變量

// 獨立性是子產品的重要特點,子產品内部最好不與程式的其他部分直接互動; // 為了在子產品内部調用全局變量,必須顯式地将其他變量輸入子產品;   var module = (function($,YAHOO){     // ...   })(jQuery,YAHOO); // 上面的module子產品需要使用jQuery庫和YUI庫,就把這兩個庫(其實是兩個子產品)當作參數輸入module