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月