Javascript设计模式学习之Module(模块)模式

付永刚发布于2019-08-19 17:48 / 2134人阅读

摘要：实现模块的几种方法对象字面量表示法模式模式模式模块对象字面量对象字面量型完整版配置对象基本方法根据配置信息输出内容重写当前的配置信息输出结果值模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。该模式返回一个对象。

javascript实现模块的几种方法:

对象字面量表示法

Module模式

AMD模式

CommonJS模式

ECMAScript Harmony模块

1. 对象字面量

/*1.对象字面量型*/
var myObjectLiteral = {

    variableKey: variableValue,

    functionKey: function(){

    }
}

//完整版
var myModule = {

    myProperty: "someValue",

    //配置对象
    myConfig: {
        useCaching: true,
        language: "zh-cn"
    },

    //基本方法
    myMethod: function(){
        //todo ..
    },

    //根据配置信息输出内容
    myMethod2: function(){
        console.log("caching is:"+(this.myConfig.useCaching)?"enabled":"disabeld");
    },

    //重写当前的配置信息
    myMethod3: function(newConfig){
        if(typeof newConfig === "object"){
            this.myConfig = newConfig;
            console.log(this.myConfig.language);
        }
    }


};

/*输出结果值*/
myModule.myMethod();
myModule.myMethod2();  //caching is enabled;
var config = {
    useCaching: false,
    language: "en"
}
myModule.myMethod3(config);  //en

2. Module模式

最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。
方式: Module模式用于进一步模拟类的概念,
好处: 能够使一个多带带的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分
结果: 函数名与在页面上其他脚本定义的函数冲突的可能性降低

2.1 私有

只需要返回一个公有API,其他的一切都可以放在私有必包里。该模式返回一个对象。

var testModule = (function(){
     var counter = 0;
     
     return {
         incrementCounter: function(){
              return ++counter;
         },
         resetCounter: function(){ 
              console.log("value: "+counter);
              counter = 0;
         }
    }
})();
console.log(testModule);  //打印出来的结果是一个对象
//Object {} incrementCounter: () resetCounter: ()

testModule.incrementCounter();    //增加计数器
testModule.resetCounter();        //充值计数器

在上面的例子中,counter变量实际上完全与全局作用域隔离,进而表现的像一个私有变量。代码的其他部分无法直接读取incrementCounter()和resetCounter()。

包含命名空间,公有和私有变量的Module模式:

var myNamespace = (function(){
    var myPrivateVar = 0;
    var myPrivateMethod = function(foo){
        console.log(this+"/"+arguments.caller+"/"+arguments.callee);
        console.log(foo);
        console.log(myPrivateVar);
    };
    
    return {
         //公有变量
         myPublicVar: "foo",
         //调用私有变量和私有方法的公有函数
         myPublicFunction: function(bar){
              myPrivateVar++;
              myPrivateMethod(bar);
         }
    };
})();
console.log(myNamespace);
myNamespace.myPublicFunction("liuyidi");

2.2 使用Module模式实现一个购物车模块

var basketModule = (function(){
    //定义一个私有数组
    var basket = [];
    
    function doSomethingPrivate(){
       //...
    }
    
    function doSomethingElsePrivate(){
       //...
    }
    
    //返回一个暴露出的公有对象
    return {
       //添加item到购物车
       addItem: function(values){
          basket.push(values);
       },
       
       //从购物车删除item
       delItem: function(values){
          basket.pop(values);
       },
       
       //获取购物车里的item数
       getItemCount: function(){
          return basket.length;
       },
       
       //私有函数的公有形式别名
       doSomething: doSomethingPrivate,
       
       //获取购物车里所有item的价格总值
       getTotal: function(){
          var itemCount = this.getItemCount(),
              total = 0;
          while(itemCount--){
              total += basket[itemCount].price;
          }
          
          return total;
       }
    };    
})();
console.log(basketModule);
basketModule.addItem({item:"xs",price: 0.5});
basketModule.addItem({item:"bc",price: 0.6});
basketModule.addItem({item:"dj",price: 0.8});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());
basketModule.delItem({item:"bc",price: 0.6});

(未完待续)

2.3 Module模式变化 2.3.1 引入混入

var myModule = (function($,_){
    
    function privateMethod1(){
        $(".container").html("test");
    }
    
    function privateMethod2(){
        console.log(_.min([10, 5, 100, 2, 1000]));
    }
    
    return {
        publicMethod: function(){
           privateMethod1();
        }
    }
})(jQuery,_);

2.3.2 引出

声明一个全局对象之后,再返回

var myModule = (function(){
   //模块对象
   var module = {},
       privateVar = "hello,world";
   
   function privateMethod(){
      //...
   }

   module.publicProperty = "Foobar";
   module.publicMethod = function(){
      console.log(privateVar);
   };

   return module;
})();

2.3.3 工具包和特定框架的Module模式实现

Dojo,ExtJS,YUI,jQuery

云服务器 GPU云服务器 module模式 javascript设计模式 javascript命令模式 javascript严格模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78852.html

Javascript设计模式学习之Decorator(装饰者)模式

摘要：抽象模式使用的装饰者模式允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象和它们的属性一起扩展或合并为一个单一对象。定义三个对象目的是为了装饰对象将的额外功能附加到上。抽象decorator模式使用jQuery的装饰者模式 jQuery.extend()允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象(和它们的属性)一起扩展(或合并）为一个单一对象。定义...

Joyven 2019-08-19 17:50 评论0 收藏0
Javascript设计模式学习之Observer(观察者)模式

摘要：一个对象维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。观察者模式的实现模拟拥有的一系列依赖使用扩展对象模拟目标和在观察者列表上添加删除或通知观察者一个对象（subject)维持一系列依赖于它(观察者）的对象，将有关状态的任何变更自动通知给它们。当一个目标需要告诉观察者发生了什么有趣的事情,它会向观察者广播一个通知当我们不再希望某个特定的观察者获取其注册目...

DevWiki 2019-08-19 17:50 评论0 收藏0
Javascript学习之创建对象

摘要：在中，除了几种原始类型外，其余皆为对象，，既然对象如此重要，那就列举一下在中如何创建对象通过构造函数创建对象实例对象字面量对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。在Javascript中，除了几种原始类型外，其余皆为对象（Object，Array ...），既然对象如此重要，那就列举一下在Javascript中如何创建对象：通过Object构造...

jollywing 2019-08-21 15:34 评论0 收藏0
MongoDB学习之Mongoose的使用

摘要：文档是的核心概念，是键值对的一个有序集，在里文档被表示成对象。创建集合数据库中的集合名称当我们对其添加数据时如果已经存在，则会保存到其目录下，如果未存在，则会创建集合，然后在保存数据。使用创建，如下示例连接成功许巍男保存成功保存失败参考 mongoose简介 mongoose网站：https://mongoosejs.com/ 为什么要用Mongoose Mongoose就是一个让我们...

qieangel2013 2019-06-26 17:54 评论0 收藏0
【抢先领】《React 学习之道》我们翻译了一本最简单，且最实用的 React 实战教程……

摘要：学习之道简体中文版通往实战大师之旅掌握最简单，且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授，并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅：掌握 React 最简单，且最实用的教程。 showIm...

oneasp 2019-08-22 14:03 评论0 收藏0