• JavaScript--Module模式


    //module: Module模式是JavaScript编程中一个非常通用的模式
      1 window.onload = function() {
      2     //1、基本使用:
      3     var MyFn = function() {
      4         var age = 24,sex = "boy";//私有变量
      5         var action = function() {//私有行为
      6             console.log("it man");
      7         };
      8         return {//暴露的公开成员
      9             work : "orderMonkey",
     10             action2 : function() {
     11                 console.log("it developer!");
     12             }
     13         }
     14     };
     15     var newMyFn = new MyFn();
     16     console.log(newMyFn.action2());
     17     console.log("===============================");
     18     //基本用法的缺点:每次使用时都要使用new 关键字生成,这样在内存中每次会copy一份,占用内存,使用闭包可以避免内存问题,实现自执行。也可以实现功能的扩展。
     19 
     20     //2、模块方法:
     21     var MyFn2 = (function() {
     22         var my = {};//向外返回的对象
     23         var age = 25,name = "assassin";
     24         var action = function() {
     25             console.log("内部私有成员");
     26         };
     27         my.EnglishName = "wanghf";
     28         my.action2 = function() {
     29             console.log("major in JavaScript!");
     30         };//公有代码状态
     31         return my;
     32         /*return my = {//向外返回的对象
     33          work : "It developer",
     34          action2 : function() {
     35          console.log("外部成员变量");
     36          }
     37          }*/
     38     })();
     39     console.log(MyFn2.action2());//调用时避免生成,减小内存占有量
     40     console.log("===============================");
     41     //模块方法全局变量的引入和jQuery设计思路一样采用全局传参
     42     var MyFn3 = (function($) {
     43         //同上
     44     })(jQuery);
     45     //3、模块的扩展:
     46     //对于大型项目测需要对自己的扩展了,基于上述的思想,同样把自己作为参数传值,进行扩展
     47     var MyFn2 = (function(my) {//var不是必写,为了统一。
     48         my.addName = "intelwisd";
     49         my.addAction3 = function() {
     50             console.log("扩展的新方法...");
     51         };
     52         /*var my1 = {
     53          addName : "intelwisd",
     54          addAction3 : function() {
     55          console.log("外部成员变量");
     56          }
     57          };*/ //对象的形式有对象的拷贝之前的会覆盖以前的
     58         return my;
     59     })(MyFn2);
     60     console.log(MyFn2.action2());
     61     console.log("===============================");
     62     //4、松耦合扩展和紧耦合扩展
     63     //松耦合扩展 利用 var MyFn2 = MyFn2 || {};
     64     var MyFn2 = (function(my) {
     65         my.addName1 = "intelwisd1";
     66         my.addAction4 = function() {
     67             console.log("松耦合扩展的新方法...");
     68         };
     69         /*var my = {
     70          addName: "intelwisd111",
     71          addAction3: function () {
     72          console.log("外部成员变量");
     73          }
     74          };*/
     75         return my;
     76     })(MyFn2 || {});
     77     console.log(MyFn2.EnglishName);
     78     console.log(MyFn2.addName1);
     79     console.log(MyFn2.action2());
     80     console.log(MyFn2.addAction4());
     81     //松耦合的优点:确保该对象,在存在的时候直接用,不存在的时候直接赋值为{}
     82     console.log("===============================");
     83     //紧耦合扩展 可以实现重载的功能,但要确保加载顺序
     84     var MyFn2 = (function(my) {
     85         var addAction4 = my.newAddAction4;
     86         my.newAddAction4 = function() {//重载函数,以前的函数可以继续使用
     87             console.log("紧耦合扩展....");
     88         };
     89         return my;
     90     })(MyFn2);
     91     console.log(MyFn2.addAction4());
     92     console.log(MyFn2.newAddAction4());
     93     console.log("===============================");
     94     //5、克隆与继承 (在紧耦合的基础上进行继承,其实该对象的属性对象或function根本没有被复制,只是对同一个对象多了一种引用而已,所以如果老对象去改变它,那克隆以后的对象所拥有的属性或function函数也会被改变。)
     95     var MyFn2 = (function(my) {
     96         var my1 = {}, key;
     97         for (key in my) {
     98             if (my.hasOwnProperty(key)) {
     99                 my1[key] = my[key];
    100             }
    101         }
    102         var addAction4 = my1.newAddAction4;
    103         my1.newAddAction4 = function() {//重载函数,以前的函数可以继续使用
    104             console.log("紧耦合扩展2....");
    105             // 克隆以后,进行了重写,当然也可以继续调用以前的
    106         };
    107         return my1;
    108     })(MyFn2);
    109     console.log(MyFn2.addAction4());
    110     console.log(MyFn2.newAddAction4());
    111     console.log("===============================");
    112     //6、跨文件中的私有成员的共享
    113     var MyFn3 = (function (my) {
    114         var _private = my._private = my._private || {},
    115             _seal = my._seal = my._seal || function () {
    116                     delete my._private;
    117                     delete my._seal;
    118                     delete my._unseal;
    119                 },
    120             _unseal = my._unseal = my._unseal || function () {
    121                     my._private = _private;
    122                     my._seal = _seal;
    123                     my._unseal = _unseal;
    124                 };
    125         return my;
    126     } (MyFn2 || {}));
    127     //任何文件都可以对他们的局部变量_private设属性,并且设置对其他的文件也立即生效。一旦这个模块加载结束,应用会调用 blogModule._seal()"上锁",这会阻止外部接入内部的_private。如果这个模块需要再次增生,应用的生命周期内,任何文件都可以调用_unseal() ”开锁”,然后再加载新文件。加载后再次调用 _seal()”上锁”。
    128     //子模块共有的成员创建
    129     MyFn2.CommentSubModule = (function () {
    130         var my = {};
    131         // ...
    132 
    133         return my;
    134     } ());
    135     //eg:
    136     MyFn3.CommentSubModule = (function () {
    137         var my = {
    138             name : "assassin",
    139             Fn1 : function() {
    140                 alert(0);
    141             }
    142         };
    143         // ...
    144 
    145         return my;
    146     } ());
    147 }


    学习来源Tom大叔javascript--Module
  • 相关阅读:
    Redis分布式锁的实现原理
    Redis锁的简单应用
    Redis所需内存 超过可用内存怎么办
    redis学习笔记之虚拟内存
    组织安全性SQL
    应收发票相关脚本
    用户与职责与请求关系语句
    应收事物处理删除 SQL 语句
    总账库存科目明细追溯
    月结各模块关闭情况查询
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7290619.html
Copyright © 2020-2023  润新知