码迷,mamicode.com
首页 > 编程语言 > 详细

javascript设计模式之Module模块

时间:2015-07-30 09:34:41      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:modual   设计模式   

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

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
        
    }   

})();













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

javascript设计模式之Module模块

标签:modual   设计模式   

原文地址:http://blog.csdn.net/vuturn/article/details/47132189

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!