读书笔记--JavaScript设计模式:Module模式(为类提供私有和公有封装)

个人主页:http://laichuanfeng.com/

Module模式最初定义为一种在传统软件工程中为类提供私有和公有封装的方法,在JavaScript中,module模式能屏蔽全局变量,使函数名与页面上其他脚本定义的函数冲突的可能性降低,直接说就是为函数定义命名空间。

示例

计数器

创建一个自包含的模块来实现Module模式。
var testModule=(function(){
	var counter=0;
	return {
		incrementCounter:function(){
			return ++counter;
		},
		resetCounter:function(){
			console.log("counter value prior to reset: "+counter);
			counter=0;
		}
	}
})();// 匿名函数,实现后立即执行一次
// 增加计数器
console.log(testModule.incrementCounter());

// 检查计数器并重置
testModule.resetCounter();

输出结果:
________________________________________________________
对比另一种写法(闭包)
var otherModule=function(){
	var counter=0;
	return {
		incrementCounter:function(){
			return ++counter;
		},
		resetCounter:function(){
			console.log("counter value prior to reset: "+counter);
			counter=0;
		}
	}
};
// 创建计数器
var count=otherModule();
// 增加计数器
console.log(count.incrementCounter());
// 检查计数器并重置
count.resetCounter();

经典实现

一个包含私有变量,私有方法,公有变量,公有方法的Module模式。
var myNamespace=(function(){

	// 私有计数器变量
	var myPrivateVar=0,

	//记录所有参数的私有方法
	myPrivateMethod=function(foo){
		console.log(foo);
	};
	return {
		// 公有变量
		myPublicVar:"foo",

		//调用私有变量和方法的公有函数
		myPublicFunction:function(bar){

			//增加私有计数器值
			myPrivateVar++;

			//传入bar调用私有方法
			myPrivateMethod(bar);
		},
	}
})();

购物车实例

var basketModule=(function(){
	var basket=[];
	function doSomethingPrivate () {
		console.log("private function");
	}
	function doSomethingElsePrivate () {
		console.log("else private function");
	}
	return{
		addItem:function(values){
			if(typeof(values)==="object"){
				basket.push(values);
			}else{
				throw new Error("Must be Object");
			}
		},
		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:"bread",
	price:0.5
});

basketModule.addItem({
	item:"butter",
	price:0.3
});
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());

引入混入

因为Module是屏蔽全局变量,如果我们想在自己的模块中引入其它模块,比如Jquery,就要用到引入混入,将全局变量作为参数传递给模块的匿名函数,并取别名,实现如下

var myModuel=(function(JQ){
	function privateMethod(){
		JQ(".container").html("test");
	}
	return {
		publicMethod:function(){
			privateMethod();
		}
	}
})(jQuery);




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值