js模块化小结
复述一遍阮一峰的blog,加深印象
博客地址 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
1.函数 function m1(){} 这样函数里的新函数或者var的对象就不会污染全局;
2.对象写法
代码优点:
1)多个有关联的变量或者函数不污染全局,可以这样在前面加一个module1的名字
2)可以保证 new object里的key之间有一些逻辑上的联系
var module1 = new Object({ _count : 0, m1 : function (){ alert(_count); //报错 }, m2 : function (){ //... } });
调用时 module1.m1();
注意:key他们都是平行的。平行的意思是?看以下说明
如果在全局变量中写以下代码
var count = 0; function m1(){ alert(count); //0 } function m2(){
m1();
}
m1里是可以获取count的,m2里也可以调用m1。但是在module1里,各个函数和变量不可以相互引用,引用的话就如第一段代码中的alert那里会报错。
所以平行的意思就是,module1里的_count,m1,m2都是一样大的官,谁都不能调用谁支使谁。
代码缺点:外部可以修改module1内部内容 , 如 module1._count = 1;
3.模块函数写法
var module1 = function(){ var _count = 0; var m1 = function(){ alert(_count); }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; } $('#button').click( function(){ module1().m1(); //0 });
优点:1)可以私有函数或变量 ,如_count,function private
2)外部无法改变
下面验证了代码无法改变,click的时候根本就无法进入修改m1的代码
$('#button').click( function(){ module1().m1 = function(){ //未进入 alert(2); } module1().m1(); });
立即执行函数写法
var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })();
这样可以直接执行module1 就不用像上面那个代码再module1()才能生效模块里面的内容了