您的位置:首页 > Web前端 > JavaScript

javascript(模块模式)

2017-03-02 13:41 197 查看

javascript Module(模块)模式

从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())
上面是一个最简单的构造器模式的版本,它存在一些问题,比如让继承变得困难。最关键的问题是,
toShow()
这样的函数是为每个使用Car构造器创建的新对象而分别重新定义的。最不是最理想的,因为这种函数应该在所有的Car类型实例之间共享。所以后又有了基于原型的构造器对象创建

带原型的Constructor(构造器)

function Car(model,year,miles){
this.model = model;
this.year = year;
this.miles = miles;
}
//注意这里直接使用了Object.prototype.newMethod,而不是直接定义Object.prototype是为了避免重新定义prototype对象
/*
Car.prototype = {
constructor: Car,//这样写需要重新定位constructor
toShow:function(){
return this.model + "已经行驶了:" +this.miles + "公里!";
}
}
*/
Car.prototype.toShow = function(){
return this.model + "已经行驶了:" +this.miles + "公里!";
}

//用法:

var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);

console.log(benz.toShow());
console.log(bmw.toShow());


现在toShow()的单一实例就能在所有Car对象之间共享了。

基本的关于构造器创建对象的模式说完了

以下来讲解:

Module(模块)模式

看一个例子:
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());


总结

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

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

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

即:

(function(){

})();

9696
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript java 函数