javascript(三、4)module模式、立執行函數（Evernote）

基本特徵：

• 模塊化
• 封裝變量和function，不與全局的namaspasce接觸，鬆耦合
• 只暴露public
   

1.var blogModule = (function (my) {

    // 添加一些功能   
    
    return my;
} (blogModule || {}));  ----判斷是否有存在blogmodule，不存在則直接複製爲{}；

2.var blogModule = (function (my) {
    var oldAddPhotoMethod = my.AddPhoto;

    my.AddPhoto = function () {
        // 重載方法，依然可經過oldAddPhotoMethod調用舊的方法
    };

    return my;
} (blogModule));

經過這種方式，咱們達到了重載的目的，固然若是你想在繼續在內部使用原有的屬性，你能夠調用oldAddPhotoMethod來用

 

 

 

3.用閉包保存狀態

理解：閉包直接能夠引用傳入的這些參數，利用這些被lock住的傳入參數，自執行函數表達式能夠有效地保存狀態。

// 這個代碼是錯誤的，由於變量i歷來就沒背locked住
// 相反，當循環執行之後，咱們在點擊的時候i纔得到數值
// 由於這個時候i才真正得到值
// 因此說不管點擊那個鏈接，最終顯示的都是I am link #10（若是有10個a元素的話）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 這個是能夠用的，由於他在自執行函數表達式閉包內部
// i的值做爲locked的索引存在，在循環執行結束之後，儘管最後i的值變成了a元素總數（例如10）
// 但閉包內部的lockedInIndex值是沒有改變，由於他已經執行完畢了
// 因此當點擊鏈接的時候，結果是正確的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

// 你也能夠像下面這樣應用，在處理函數那裏使用自執行函數表達式
// 而不是在addEventListener外部
// 可是相對來講，上面的代碼更具可讀性

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener(

^{'click', (function (lockedInIndex) {}

^{return function (e) {}

^{e.preventDefault();}

^{alert('I am link #' + lockedInIndex);}

        };
    })(i), 'false');

}

4.模擬c++中的類！！！// 建立一個當即調用的匿名函數表達式
// return一個變量，其中這個變量裏包含你要暴露的東西
// 返回的這個變量將賦值給counter，而不是外面聲明的function自身

var counter = (function () {
    var i = 0;

    return {
        get: function () {
            return i;
        },
        set: function (val) {
            i = val;
        },
        increment: function () {
            return i++;
        }
    };
} ());

// counter是一個帶有多個屬性的對象，上面的代碼對於屬性的體現實際上是方法

counter.get(); // 0
counter.set(3);
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined 由於i不是返回對象的屬性i; // 引用錯誤: i 沒有定義（由於i只存在於閉包）

                                                                                                                     2015年1月