javascript 模塊化常見寫法

參考阮一峰老師的文字 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

1,采用對象的方式進行模塊封裝,由于有了命名空間,所以不會污染到其他空間。

var module = {

n : 0,

m1 : function (){
      //...
    },

m2 : function (){
      //...
    }

};

module.m1();//調(diào)用該模塊的方法

但是module.n = 100;//這樣就修改了模塊內(nèi)部的變量值。所以不太好。

2,采用立刻執(zhí)行的函數(shù)的寫法(閉包)

var module = (function(){

var n = 0;

var m1 = function(){
      //...
    };

var m2 = function(){
      //...
    };

return {
      m1 : m1,
      m2 : m2
    };

})();

這樣就沒法改變n的值了。

3,對已有模塊進行添加方法之類的,或者在已有模塊的基礎(chǔ)上進行添加和改造(繼承自原對象),返回一個新對象。

var module1 = (function (mod){ //或var module2 = ....

mod.m3 = function () {
      //...
    };

return mod;

})(module1);

上面的代碼將module1模塊傳入以后,進行加工,添加了一個新方法m3(),然后返回新的module1模塊。

如果擔(dān)心引入的module可能是不存在的,可以

var module1 = (function(mod){

//...

})(window.module1 || {}); //參數(shù)可以為空對象

4,保證模塊獨立性,為了在模塊內(nèi)部調(diào)用全局變量,顯式地將其他變量輸入模塊。

var module1 = (function ($, YAHOO) {

//...

})(jQuery, YAHOO);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 作者:阮一峰 日期:2012年10月26日 隨著網(wǎng)站逐漸變成"互聯(lián)網(wǎng)應(yīng)用程序",嵌入網(wǎng)頁的Javascript代碼...
    老夫的天閱讀 484評論 0 3
  • 隨著網(wǎng)站逐漸變成"互聯(lián)網(wǎng)應(yīng)用程序",嵌入網(wǎng)頁的Javascript代碼越來越龐大,越來越復(fù)雜。 一、原始寫法模塊就...
    DaveWeiYong閱讀 278評論 0 0
  • 一、原始寫法 模塊就是實現(xiàn)特定功能的一組方法。 只要把不同的函數(shù)(以及記錄狀態(tài)的變量)簡單地放在一起,就算是一個模...
    L怪丫頭閱讀 1,848評論 0 0
  • 一,原始寫法 模塊就是實現(xiàn)特定功能的一組方法。 只要把不同的函數(shù)(以及記錄狀態(tài)的變量)簡單地放在一起,就算是一個模...
    倔強的仙人掌閱讀 212評論 0 0
  • 我們?yōu)槭裁匆K化?一般出來什么東西,說明當(dāng)前的工具有其缺陷,或者是為了方便什么。那么我們就來看看通過模塊,我們可...
    webCoder閱讀 943評論 2 13

友情鏈接更多精彩內(nèi)容