javascript设计模式之Module模块

模块是任何强大的应用程序架构不可或缺的一部分,它通常能够帮助我们清晰地分离和组织项目中的代码单元。

JavaScript实现模块模式 的几种方法:

(1)对象字面量表示法

(2)Module模式

(3)AMD模式

(4)CommonJS模块

(5)ECMAScript Harmony

1.对象字面量

示例:

var myModule={
    myProperty:"someValue",
    myConfig:{
      useCaching:true,
      language:"en"
     },
    myMethod:function(){
       console.log("Hello World");
     }
   }                                                                                                                                                          Module.myMethod();

使用对象字面量有助于封装和组织代码。

2.Module模式

Module模式最初是被定义为一种在传统软件工程中为类提供私有和公用的封装方法。

在JavaScript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公用/私有方法和变量,从而屏蔽来自全局作用域的特殊部分,避免命名冲突。

示例:购物车

var basketModule=(function(){

   var basket=[];

   function doSomethingPrivate(){
    //......
   }

    return  {
        addItem:function(values){
         basket.push(values);
        },
        getItemCount:function(){
           return basket.length;
         },

        getTotal:function(){
           var itemCount=this.getItemConunt(),                                                                                                                            total=0;
           while(itemCount--){
            total+=basket[itemCount].price;
            return total;
                }
          }
    }
})();

优点:

(1)只有我们的模块才能享有拥有私有函数的自由。因为他们不会暴露于页面的其余部分。

(2)鉴于函数往往已经声明并且命名,在试图找到哪些函数抛出异常时,这将使得在调试器中显示堆栈变得容易。

3.改进--揭示模式(Revealing Module)

产生原因:Heilmann对于这种状况不满,当他想从另外一个方法调用一个公有方法或者访问公有变量时,必须重复主对象的名称。他也不喜欢使用Module模式时,必须切换到对象字面量表示法来让某种方法变为公有方法。

他创建了一种新的模式,能够在私有范围内简单定义所有的函数和变量,并返回一个匿名对象,它拥有指向私有函数的指针,该函数是他希望展示为公有的方法。

示例:

var revealingModule=(function(){
    var privateVar="private",
         publcVar="Hello World";
    function privateFunction(){
          console.log("Name:"+privateVar);
     }
    function publicSetName(strName){
       privateName=strName;
   }
   function publicGetName(){
       privateFunction();
    }

return {
         setName:publicSetName,

         greeting:publicVar,

         getName:publicGetName

    }   

})();

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 19:37:01

javascript设计模式之Module模块的相关文章

javascript设计模式-module(模块)模式

模块是任何强大应用程序中不可或缺的一部分,它通常能帮助我们清晰地分离和组织项目中的代码单元. js中实现模块的方法: 对象字面量表示法 Module模式 AMD模块 CommonJS模块 ECMAScript Harmony 模块 对象字面量 对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始,在对象的外部,新成员可以使用如下赋值语句添加到对象字面量上,myModule.property = "someValue". var myM

【javascript设计模式】构造器模式、模块模式、单例模式

构造器模式(Constructor) 构造器模式是学习js最早接触的一种,实现主要如下: 1 function myObject(name){ 2 this.name = name; 3 } 4 5 myObect.propotype = function sayName(){ 6 alert(this.name); 7 } 使用的时候需要new一个对象. 1 var myObj = new myObject('hello'); 2 myObj.sayName(); 模块模式(Module) 模

模块化JavaScript设计模式(一)

在可扩展JavaScript的世界里,如果我们说一个应用程序是模块化(modular)的,那么通常意味着它是由一系列存储于模块中的高度解耦,不同的功能片段组成.在可能的情况下,通过一处依赖性,松耦合可以使应用程序的可维护性更加简单. 如果有效地实现了这点,就很容易地了解一部分如何影响另一个部分. 异步模块定义(AMD)的整体目标是提供模块化的JavaScript解决方案,以便开发者使用.诞生于使用XHR+eval的Dojo开发经验,这种格式的支持者希望能够避免未来的任何解决方案受到过去解决方案缺

JavaScript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免代码复用,使代码更

【设计模式】module模式&amp;&amp;Revealing module (揭示)模式

写在前面 <head first设计模式>里有一篇文章,是说使用模式的心智, 1.初学者"心智" :"我要为HELLO WORLD找个模式" 2.中级人员模式: "或许这里我需要一个单件模式" 3.悟道者心智:"在这里使用一个装饰者模式相当自然" but,but,but,不学,连初学者都不算呐... 先了解一下设计模式的起源吧: >>>设计模式的起源就比较有意思了,设计模式最初起源于奥地利维也纳的

javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq

RequireJS is a JavaScript file and module loader

RequireJS RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量. /* --- RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in ot

《JavaScript设计模式 张》整理

最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单工厂 又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例. 两种实现方式,第一种是通过类实例化对象创建,第二种是创建一个新对象然后包装增强其属性和功能. demo代码. 2)工厂方法 通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例. 将工厂方法看作是一个实例化对象的工厂类. demo

Javascript设计模式(摘译)

说明: 未完成...更新中.... 一.javascipt设计模式分类 设计模式分类有很多标准,最流行的三种如下 1)  creational  --  主要关注对象创建 Creational design patterns deal directly with object initialization procedures focusing on the creation of situation-specific objects. Without thinking about how ob