js设计模式之Module(模块)模式

9.2Module(模块)模式

通常能够帮助我们清晰地分离和组织项目中的代码单元

js中实现模块的方法

1》对象字面量表示法

2》Module模式

3》AMD模式

4》CommonJS模块

5》ECMAScript Harmony模块

Module模式某种程度上是基于对象的字面量

9.2.1对象字面量

在对象字面量表示法中,一个对象被描述为一组包含在大括号{}中、以逗号分隔的name/value对。对象内的名称可以是字符串或标识符,后面跟着一个冒号。对象中最后的一个name/value对的后面不用加逗号,如果加逗号将会导致出错。

Var myObjectLiteral={

variableKey:variableValue;

functionKey:function(){

//

}

};

对象字面量不需要使用new运算符进行实例化,但不能用在一个语句的开头,因为开始的可能被解读为一个块的开始。在对象的外部,新成员可以使用如下赋值语句添加在字面量上,如:

myModule.property="some Value";

使用对象字面量有助于封装和组织代码,Module模式仍然使用对象字面量,但只是作为一个作用域函数的返回值。

   var myModule={
        myProperty:"somevalue",
        //对象字面量可以包含属性和方法
        //例如,可以声明模块的配置对象
        myConfig:{
            useCaching:true,
            language:"en"
        },
        //基本方法
        myMethod:function(){
            console.log("myMethod");
        },
        //根据当前配置输出信息
        myMethod2:function(){
            console.log("caching is:" + (this.myConfig.useCaching) ? "enabled":"disabled");
        },
        //重写当前配置
        myMethod3:function(newConfig){
            if(typeof newConfig==="object"){
                this.myConfig=newConfig;
                console.log(this.myConfig.language);
            }
        }
    };
    myModule.myMethod();
    myModule.myMethod2();//打印出来的是enabled,没有加上前面的字符串
    myModule.myMethod3({
        language:"fr",
        useCaching:false
    });

9.2.2Module(模块)模式

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

在js中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象用于公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

模块模式的模板

var myNamespace=(function(){
    //私有计数器变量
    var myPrivateVar=0;
    //记录所有参数的私有函数
    var myPrivateMethod=function(foo){
        console.log(foo);
    }
    return{
        //公有变量
        myPublicVar:"foo",
        //调用私有变量和方法的公有函数
        myPublicFunction:function(bar){
            //增加私有计数器值
            myPrivateVar++;
            //传入bar调用私有方法
            myPrivateMethod(bar);
        }
    };
})();

9.2.2.1 私有

Module模式使用闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需返回一个公有API,而其他的一切则都维持在私有闭包里 。

这为我们提供了一个屏蔽处理底层时间逻辑的整洁解决方案,同时只暴露一个接口供应用程序的其他部分使用。该模式除了返回一个对象而并不是函数之外,非常类似于一个立即调用的函数表达式。

应该指出的是,在js中没有正真意义上的“私有”,因为js没有访问修饰符,因此我们使用函数作用域来模拟这个概念。在Module模式内:闭包声明的变量和方法只在该模式内部可用。但在返回对象上定义的变量和方法,则对外部使用者都是可用的。

    var basketModule=(function(){
        //私有
        var basket=[];
        function doSomethingPrivate(){
            console.log("private");
        }
        function doSomethingElsePrivate(){
            //
        }
        //返回一个暴露出的公有对象
        return{
            //添加item到购物车
            addItem:function(values){
                basket.push(values);
            },
            //获取购物车里的item数
            getItemCount:function(){
                return basket.length;
            },
            //私有函数的公有形式别名,
            // doSomething:doSomethingPrivate自动调用doSomethingPrivate函数
            doSomething:doSomethingPrivate,
            //获取购物车里所有item的价格总值
            getTotal:function(){
                var itemCount=this.getItemCount(),total=0;
                while(itemCount--){
                    total+=basket[itemCount].price;
                }
                return total;
            }
        };
    })();

    //basketModule返回了一个拥有公用API的对象
    basketModule.addItem({
        item:"bread",
        price: 0.5
    });
    basketModule.addItem({
        item:"butter",
        price:0.3
    });
    console.log(basketModule.getItemCount());
    console.log(basketModule.getTotal());
    //会打印一个private和一个undefined,原因不明
    console.log(basketModule.doSomething());
    console.log(basketModule.basket);

basket模块的优点:

1》只有模块自身才能享有拥有私有函数的自由,因为它只会暴露我们输出的API。

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

3》根据环境,还可以让我们返回不同 的函数

9.2.2.3 示例

    /**
     * counter的存在被局限在模块的闭包内,唯一能访问其作用域的代码是return中的2个函数
     */
    var testModule=(function(){
        var counter=0;
        return{
            incrementCounter:function(){
                return ++counter;
            },
            resetCounter:function(){
                console.log("counter value prior to reset "+counter);
                counter=0;
            }
        };
    })();
    //增加计数器
    testModule.incrementCounter();
    //检查并重置计数器
    testModule.resetCounter();
//引入混入
    var myModule=(function(jQ,_){
        function privateMethod1(){
            jQ(".container").html("test");
        }
        return{
            publicMethod:function(){
                privateMethod1();
            }
        };
    //引入JQuery和Underscore
    })(jQuery,_);
时间: 2024-10-06 20:23:57

js设计模式之Module(模块)模式的相关文章

JS设计模式(动态工厂模式)

<!--引入的核心JS文件--> <script type="text/javascript" src="CommonUtil.js"></script> <script type=text/javascript charset=utf-8> <!--JS设计模式(细粒度工厂模式)--> //搭建一个工厂环境 买什么车——(去什么店)卖车的店——卖车——生产车 //卖车店 super Shop 只有卖车的方

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图: 组合模式的描述: 将对象组合成树形结构以表示"部分-整体"的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性. 我们把部分用Leaf表示, 把整体用Composite表示.组合模式是有一定规律的,在实现树导航的情况下,Composite需要包含一个以上Leaf,也可以包含一个以上Leaf和一个以Composite,为什么说要包含一个以上的,如果Composite不包含任何子child的话那么它就是Leaf,Leaf表示是最后一层结节. 树形导航代码片段:

【JS 设计模式 】用组合模式来实现树形导航--JS代码结构思路分析(二)

[JS 设计模式 ]用组合模式来实现树形导航--代码结构思路分析(一) 根据上一节中的HTML代码结构我们通过JS来渲染HTML代码,我们先提供一下JS的代码片段,这代码代码不是一个完整的代码是经过简化的.通过JS代码来分析如何组装HTML的 Composite类型的代码: function TreeComposite(id, name, total, level, last) { var root = document.createDocumentFragment(); var panel =

javascript设计模式之Module模块

模块是任何强大的应用程序架构不可或缺的一部分,它通常能够帮助我们清晰地分离和组织项目中的代码单元. JavaScript实现模块模式 的几种方法: (1)对象字面量表示法 (2)Module模式 (3)AMD模式 (4)CommonJS模块 (5)ECMAScript Harmony 1.对象字面量 示例: var myModule={ myProperty:"someValue", myConfig:{ useCaching:true, language:"en"

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

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

JS设计模式之装饰者模式

装饰者模式概述 在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使原有对象可以满足用户更复杂的需求 实际需求 在已有的代码基础上,为每个表单中的input默认输入框上边显示一行提示文案,当用户点击输入框时文案消失 原有代码: var telInput = document.getElementById('tel_input'); var telWarnText = document.getElementById('tel_warn_text'); input.onclick =

【JS设计模式】装饰者模式

装饰者模式:在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象 装饰模式的特点 (1) 装饰对象和真实对象有同样的接口.这样client对象就能以和真实对象同样的方式和装饰对象交互.(2) 装饰对象包括一个真实对象的引用(reference)(3) 装饰对象接受全部来自client的请求. 它把这些请求转发给真实的对象.(4) 装饰对象能够在转发这些请求曾经或以后添加一些附加功能.这样就确保了在执行时.不用改动给定对象的结构就能够

js设计模式之享元模式

享元模式(具有共性的实例对象,归并到一个类别中,避免重复创建相同实例对象) var candidateNum = 10 // 考生数量 var examCarNum = 0 // 驾考车的数量 /* 驾考车构造函数 */ function ExamCar(carType) { examCarNum++ this.carId = examCarNum this.carType = carType ? '手动档' : '自动档' } ExamCar.prototype.examine = funct

【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) 模