H5-2.25Javascript模块模式

从javascript对象创建说起
说起Module(模块)模式,可能一些刚刚接触javascript的同学还是觉得比较陌生,但是相信大多数学习javascript的同学都知道javascript对象创建的方式。最熟悉的莫过于构造器方式创建对象。
Constructor(构造器)模式
基本Construcor(构造器)

function Car(model,year,miles){
   this.model = model;
   this.year = year;
   this.miles = miles;

this.toShow = function(){
    return this.model + "已经行驶了:" +this.miles + "公里!";
    }
 }

 //用法:

//可以创建car的新实例
var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);

//打开浏览器控制台(console),查看这些对象上           调用toShow()方法的输出
   console.log(benz.toShow());
   console.log(bmw.toShow());

什么是模式

模式很容易被复用
就像上面的构造器模式,它是我们创建对象的一种模式,只要掌握了这种模式,它就是一种立即可用的解决方案。构造器模式给我们提出了快速大量简单的创建javascript对象的办法。

模式是已经验证的解决方法
解决方案其实就是开发人员的经验和见解,他们为定义和改进这些方法提供了帮助。从而形成了模式。比如构造器模式,从上面的列子就可以看出,为了更好的实现对象的创建,构造器模式在慢慢的改进,让其达到最能适合创建javascript对象的形式

模式富有表达力
看到模式时,通常就表示有一个设置好的结构和表达解决方案的词汇。很简单,做项目时,只要你说通过原型的构造器模式创建对象。那么大家都知道你说的是什么意思。或者你说这个问题可以用观察者模式去解决。只要大家都熟悉观察者模式,那么在程序员之间就少了很多沟通的障碍。

所以模式也就是一种可以复用的解决方案而已,用来解决软件设计中遇到的常见问题。

Module(模块)模式
模块是任何强大应用程序架构中不可或缺的一部分,它通常能够帮我们清晰的分离和组织项目中的代码单元。简单的比喻的话,javascript中模块就类似于C#中的命名空空间,Java中的包。
在javasctipt中,有几种用于实现模块的方法,包括
对象字面量表示法

Module模式

AMD模块

CommonJS模块

ECMAScript Harmony模块

对象字面量
对象字面量的表示法相信大家都不会陌生,一个对象被描述为一组包含在大括号( { } )中,以逗号(,)分隔的name/value对,对象内的名称可以是字符串或者标识符,后面跟着一个冒号。对象中最后一个name/value对的后面不能加逗号,不然会导致出错

 var myObjectLiteral = {
variableKey:variableValue,
functionKey:function(){
    //...
  }
}




 var myModule = {
  myProperty:"someValue",

//对象字面量可以包含属性和方法
//例如:可以声明模块的配置对象
//注意:无论是对象还是方法写完,如果不是最后一个记得加上(,)
myConfig:{
    useCaching:true,
    language:'en'
},

//基本方法
myMethod:function(){
    console.log('输出基本信息');
},

//根据配置输出信息
myMethod2:function(){
    console.log('缓存是:' + (this.myConfig.useCaching)?'可用的':'不可用');
},

//重写配置
myMethod3 = function(newConfig){
    if(typeof newConfig === 'object'){
        this.myConfig = newConfig;
        console.log(this.myConfig.language);
    }
}
};

//调用:

//输出基本方法
myModule.myMethod();

//输出:可用的
 myModule.myMethod2();

//输出:fr
myModule.myMethod3({
   language:'fr',
   useCaching:false
});

Module(模块)模式
在javascript中,Module模式用于进一步模拟类的概念,通过这种方式,可以使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低
私有
Module模式使用闭包封装”私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式,防止其泄露至全局作用域,并与别的开发人员的接口发生冲突。通过该模式,只需返回一个公有API,而其他的一切都维持在私有闭包里面。
这样做为我们提供了一个屏蔽处理底层事件逻辑的整洁解决方案,同时只暴露一个接口供应用程序的其他部分使用。该模式除了返回一个对象而不是一个函数之外,非常类似于一个立即调用的函数表达式(IIFE)

购物车实例
代码:

  var basketModule = (function(){
         //购物车数组,私有变量
        var basket = [];
       //私有函数
       function doSomethingPrivate(){
       //。。。
      }
              
//私有函数
function doSomethingElsePrivate(){
    //。。。
}

//返回一个暴露出的公有对象
return {
    //添加item到购物车
    addItems:function(values){
        basket.push(values);
    },

    //获得购物车里商品总数
    getItemCount:function(){
        return basket.length;
    },

    //私有函数的公有形式别名
    doSomething:doSomethingPrivate,

    //获取所有商品的总价格
    getTotal:function(){
        var itemCount = this.getItemCount(),
            total = 0;
        while(itemCount--){
            total += basket[itemCount].price;
        }
        return total;
    }
};
})();

   //用法:
basketModule.addItem({
item:"面包",
price:5
});
basketModule.addItem({
item:"可乐",
price:2
});

 //2
console.log(basketModule.getItemCount());
//7
console.log(basketModule.getTotal());
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,861评论 25 708
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,668评论 2 27
  • A1:片段将大脑记忆功组织比喻为RAM,意识比喻为CPU,要想高效运行就需及时清理RAM。这与前段时间阅读的《稀缺...
    seeyou_00e4阅读 357评论 1 4
  • 他叫王富,他娘在二十五年前生下了他,也正是生完他的那个冬天,寒风呼呼的,顺着窗户缝就进屋里了,刚好窗户对着床头,...
    无名指姑娘阅读 1,587评论 0 2
  • 今年是正儿八经高中毕业二十周年,我们农班私下酝酿已久的大聚会,终于有了眉目,感谢同学玉成此事,正月初四的这场...
    杨书海阅读 203评论 0 0