Javascript模塊模式學習分享

之前一直也有聽說和接觸到模塊模式、這次整理了一下、感覺蠻有收獲的、特來分享。

模塊模式很基本的一點就是匿名函數的 閉包、通過這點來實現。

//模塊模式

var MODULE = (function(){
     /*函數默認是返回this的、但是定義了my對象后、return my; 返回值就變成了my對象、然后賦值給MODULE，它具有了my的所有屬性和方法，也擁有了匿名函數里面的私有函數*/
    var my = {},
        _age;

    /*

    //這個是錯的、C++里面的思想帶過來了
    my.setAge = function(age){
        age = age;
    } 

    */

    my.setAge = function(tmp){
        age = tmp;
    };

    my.getAge = function(){
        console.log(age);
    };

    return my;
}());


MODULE.setAge(2);
MODULE.getAge();

下面這種是我以前寫的、所以決定略略有點傻

// 模塊模式自己的方式
//我也不確定這個叫不叫模塊模式、私有成員確實是包起來了、前者是返回的對象、可以直接調用、
//這邊返回的是函數、需要new 之后創建一個實例才能使用、所以兩者的差距感覺還是有的
//但是從繼承方面考慮、前一種方式繼承起來可能不是很靈活、而下一種方式可以用到很多 蠻炫的繼承方式、

var MODULE1 = (function(){
    var age;

    return function(){
        this.getAge = function(){
            console.log(age);
        }
        this.setAge = function(tmp){
            age = tmp;
        }
    }
}());

/*
這個是錯的
MODULE1().setAge(2);
MODULE1().getAge();
*/
var a = new MODULE1();
a.setAge(3);
a.getAge();

//模塊模式可以很好的利用變量導入、更靠的維護全局變量
var b = (function($){
    // do something  插件開發里面這個貌似經常使用
}(jQuery));

?

模塊模式的擴展

//模塊的擴展
//這一種是我的很挫B的方式  
MODULE.weight = 1;
MODULE.setWeight = function(tmp){
    weight = tmp;
};

MODULE.getWeight = function(){
    console.log(weight);
};

MODULE.setWeight(100);
MODULE.getWeight();


//這一種感覺很牛逼、確實很牛逼、我的方式比較散亂、他的擴展內容都用一個東西包起來、更加易于維護、值得好好學習

var MODULE = (function(my){
    //這里可以添加噼里啪啦各種內容
    my.gf = "You";
    //var gf = "You";
    my.getGf = function(){
        //這里寫成 console.log(gf) 在Nodejs里面會報錯 這應該很好理解、gf的話它調用的是這個匿名函數里面的私有成員、而my.gf是屬于my的公有的、gf在閉包里面
        //如果寫成 var gf = “You”  那寫成 console.log(gf); 就不會錯了、
        //如果用var gf的話 gf就變成了一個私有成員   用my.gf的話就變成了公有成員、兩種方式各自取舍、看個人
        //所以建議是使用 var gf' 我注釋掉的那種方式、不然setGf這種函數毛用
        console.log(my.gf);
    };
    my.setGf = function(tmp){
        gf = tmp;
    };

    // and so on
    return my;
}(MODULE) || {});


MODULE.getGf();

//那篇牛文中的緊擴展 類似于繼承中的 c.klass = p.prototype

?

保留一個對父對象的引用、在這里面就是保持一個對于原模塊的引用

復制和繼承方面、采用第一種方式的模塊比較疼、因為利用hasProperty()的擴展是基于引用的、改變一者另外一者也會改變

而采用我的那種搓逼的 function new的方式、利用繼承不會造成這種影響、這是個優點

var MODULE = (function (my) {var old_moduleMethod = my.moduleMethod;my.moduleMethod = function () {// method override, has access to old through old_moduleMethod...
　　　　　　//這是原文作者的這段代碼、他的old_moduleMethod應該也只能在這里面調用了吧？ 等my.moduleMethod被重載完、那個old_moduleMethod就沒有意義了...不知道是不是

    };return my;
}(MODULE));

?

原文作者的那個跨文件的私有狀態真的很牛逼、學習了

__seal，__unseal的鎖的思想、帥氣

//子模塊就沒有講的必要了、
MODULE.xxx = (function(){
    var you = {};

    //噼里啪啦
    return you;
}());

?

?

很搓比的過完一遍、有錯誤的希望看到的多多指正、正在學習之中、

附原文作者牛逼鏈接http://blog.jobbole.com/40409/