js模块化小结

weixin_34320724

于 2014-08-07 15:10:00 发布

阅读量40

点赞数

原文链接：http://www.cnblogs.com/cjy1993/p/3897236.html

版权

复述一遍阮一峰的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
　　　　};
　　})();