Javascript模块模式学习分享

之前一直也有听说和接触到模块模式、这次整理了一下、感觉蛮有收获的、特来分享。

模块模式很基本的一点就是匿名函数的 闭包、通过这点来实现。

 1 //模块模式
 2 
 3 var MODULE = (function(){
 4      /*函数默认是返回this的、但是定义了my对象后、return my; 返回值就变成了my对象、然后赋值给MODULE,它具有了my的所有属性和方法,也拥有了匿名函数里面的私有函数*/
 5     var my = {},
 6         _age;
 7 
 8     /*
 9 
10     //这个是错的、C++里面的思想带过来了
11     my.setAge = function(age){
12         age = age;
13     } 
14 
15     */
16 
17     my.setAge = function(tmp){
18         age = tmp;
19     };
20 
21     my.getAge = function(){
22         console.log(age);
23     };
24 
25     return my;
26 }());
27 
28 
29 MODULE.setAge(2);
30 MODULE.getAge();

下面这种是我以前写的、所以决定略略有点傻

 1 // 模块模式自己的方式
 2 //我也不确定这个叫不叫模块模式、私有成员确实是包起来了、前者是返回的对象、可以直接调用、
 3 //这边返回的是函数、需要new 之后创建一个实例才能使用、所以两者的差距感觉还是有的
 4 //但是从继承方面考虑、前一种方式继承起来可能不是很灵活、而下一种方式可以用到很多 蛮炫的继承方式、
 5 
 6 var MODULE1 = (function(){
 7     var age;
 8 
 9     return function(){
10         this.getAge = function(){
11             console.log(age);
12         }
13         this.setAge = function(tmp){
14             age = tmp;
15         }
16     }
17 }());
18 
19 /*
20 这个是错的
21 MODULE1().setAge(2);
22 MODULE1().getAge();
23 */
24 var a = new MODULE1();
25 a.setAge(3);
26 a.getAge();
1 //模块模式可以很好的利用变量导入、更靠的维护全局变量
2 var b = (function($){
3     // do something  插件开发里面这个貌似经常使用
4 }(jQuery));

 

模块模式的扩展

 1 //模块的扩展
 2 //这一种是我的很挫B的方式  
 3 MODULE.weight = 1;
 4 MODULE.setWeight = function(tmp){
 5     weight = tmp;
 6 };
 7 
 8 MODULE.getWeight = function(){
 9     console.log(weight);
10 };
11 
12 MODULE.setWeight(100);
13 MODULE.getWeight();
14 
15 
16 //这一种感觉很牛逼、确实很牛逼、我的方式比较散乱、他的扩展内容都用一个东西包起来、更加易于维护、值得好好学习
17 
18 var MODULE = (function(my){
19     //这里可以添加噼里啪啦各种内容
20     my.gf = "You";
21     //var gf = "You";
22     my.getGf = function(){
23         //这里写成 console.log(gf) 在Nodejs里面会报错 这应该很好理解、gf的话它调用的是这个匿名函数里面的私有成员、而my.gf是属于my的公有的、gf在闭包里面
24         //如果写成 var gf = “You”  那写成 console.log(gf); 就不会错了、
25         //如果用var gf的话 gf就变成了一个私有成员   用my.gf的话就变成了公有成员、两种方式各自取舍、看个人
26         //所以建议是使用 var gf' 我注释掉的那种方式、不然setGf这种函数毛用
27         console.log(my.gf);
28     };
29     my.setGf = function(tmp){
30         gf = tmp;
31     };
32 
33     // and so on
34     return my;
35 }(MODULE) || {});
36 
37 
38 MODULE.getGf();

//那篇牛文中的紧扩展 类似于继承中的 c.klass = p.prototype

 

保留一个对父对象的引用、在这里面就是保持一个对于原模块的引用

复制和继承方面、采用第一种方式的模块比较疼、因为利用hasProperty()的扩展是基于引用的、改变一者另外一者也会改变

而采用我的那种搓逼的 function new的方式、利用继承不会造成这种影响、这是个优点

var MODULE = (function (my) {
    var old_moduleMethod = my.moduleMethod;
 
    my.moduleMethod = function () {
        // method override, has access to old through old_moduleMethod...
      //这是原文作者的这段代码、他的old_moduleMethod应该也只能在这里面调用了吧? 等my.moduleMethod被重载完、那个old_moduleMethod就没有意义了...不知道是不是
}; return my; }(MODULE));

 

原文作者的那个跨文件的私有状态真的很牛逼、学习了

__seal,__unseal的锁的思想、帅气

1 //子模块就没有讲的必要了、
2 MODULE.xxx = (function(){
3     var you = {};
4 
5     //噼里啪啦
6     return you;
7 }());

 

 

很搓比的过完一遍、有错误的希望看到的多多指正、正在学习之中、

附原文作者牛逼链接http://blog.jobbole.com/40409/

posted on 2013-05-31 11:36  李珠刚  阅读(750)  评论(0编辑  收藏  举报

导航