从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());
网友评论