javascript(34)module模式立执行函数(Evernote)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript(34)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月                    

以上是关于javascript(34)module模式立执行函数(Evernote)的主要内容,如果未能解决你的问题,请参考以下文章

深入理解JavaScript系列:全面解析Module模式

深入理解JavaScript系列(34):设计模式之命令模式

JavaScript设计模式-module模式及其改进

《JavaScript设计模式》深入学习 —— Module(模块)模式

程序设计模式 工厂模式 单立模式

Javascript异步编程的4种方法