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/

  • 相关阅读:
    Linux LAMP架构搭建
    Linux 系统版本查询
    Linux 安装本地 yum源
    Linux 虚拟机安装vmware tools
    随记分页码
    flexigrid 修改json格式
    Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案
    web api 文档声明
    android UI
    Sending HTML Form Data
  • 原文地址:https://www.cnblogs.com/lizhug/p/3110058.html
Copyright © 2011-2022 走看看