zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    面向接口程序设计思想实践
    Block Chain Learning Notes
    ECMAScript 6.0
    Etcd Learning Notes
    Travis CI Build Continuous Integration
    Markdown Learning Notes
    SPRING MICROSERVICES IN ACTION
    Java Interview Questions Summary
    Node.js Learning Notes
    Apache Thrift Learning Notes
  • 原文地址:https://www.cnblogs.com/lizhug/p/3110058.html
Copyright © 2011-2022 走看看