javascript设计模式-Module(模块模式)

1,028 阅读2分钟

在javascript中,有一下几种实现模块的方法:

  • 对象字面量
  • Module模式
  • AMD模式(待补)
  • CommonJS模式(待补)
  • ES6 (待补)

对象字面量

var myModule = {
	myProperty: "someValue",
	// 对象字面量可以包含属性和方法
	myConfig: {
		useCaching: true,
		language: "en"
	},
	
	// 基本方法
	myMethod: function () {
		console.log("start")
	}
	
	// 根据当前配置输出信息
	myMethods: function () {
		console.log("Caching is" + (this.myConfig.useCaching ? 		"enabled" : "disabled"))
	}
	
	// 重写当前配置
	myMethod3: function (newConfig) {
		if (typeof newConfig === "object") {
			this.myConfig = newConfig
			console.log(this.myConfig.language)
		}
	}
}

// 输出 start
myModule.myMethod()

// 输出 Caching is enabled
myModule.myMethod2()

// 输出 fr
myModule.myMethod3({
	language: "fr",
	useConfig: false
})

Module (模块)模式

在Javascript中,Module模式用于进一步模拟类的概念,通过这种方式,能够使一个单独的对象拥有公有/私有方法和变量,从而屏蔽来自全局作用域的特殊部分。好处是函数名与页面上其他脚本定义的函数冲突的可能性降低。
在Javascript中,没有真正意义的私有,因为其没有修饰符。因此我们需要用函数来模拟。在Module模式中,由于闭包的存在,声明的变量和方法只在该模式内部可用。但在返回对象上定义的变量和方法,则对外部使用者都是可用的。

// 购物车模式
var basketModule = (function () {
	// 私有
	var basket = []
	function doSomethingPrivate() {
		console.log("content")
	}
	
	function doSometingElsePrivate() {
		console.log("content else")
	}
	
	// 返回一个暴露出的公有对象
	return {
		// 添加商品到购物车
		addItem: function (values) {
			basket.push(values)
		},
		// 获取购物车中的商品数量
		getItemCount: function () {
			return basket.length
		},
		// 私有函数的公有形式的别名
		doSometing: doSomethingPrivate,
		// 获取购物车中所有商品的总值
		getTotal: function () {
			var itemCount - this.getItemCount(),
				total = 0; 
			while(itemCount--) {
				total += basket[temCount].price
			}
			return total
		}
	}
}){}

// basketModule 返回了一个拥有公用Api的对象
basketModule.addItem({
	item: "bread",
	price: "1"
});
basketModule.addItem({
	item: "apple",
	price: "2"
})
// 输出 2
console.log(basketModule.getItemCount)

// 输出 3
console.log(basketModule.getTotal)

// 输出undefined,因为该变量没有暴露在公有的Api中
console.log(basketModule. basket)

优点:支持私有数据,代码的公有部分可以接触私有部分,但外界无法获取类的私有部分。 缺点:由于我们访问公有和私有的方式不同,当我们想改变可见性时,我们必须要修改每一个曾经使用过该成员的地方。

Revealing Module(揭示模块)模式

var basketModule = (function () {
	// 私有
	var basket = []
	function doSomethingPrivate() {
		console.log("content")
	}
	
	function doSometingElsePrivate() {
		console.log("content else")
	}
	
	// 添加商品到购物车
	function addItemPublic(values) {
		doSometingElsePrivate()
		basket.push(values)
	}
	
	// 获取购物车中的商品数量
	function getItemCountPublic() {
		doSomethingPrivate()
		return basket.length
	}
	
	// 获取购物车中所有商品的总值
	function getTotalPublic () {
		var itemCount - this.getItemCount(),
			total = 0; 
		while(itemCount--) {
			total += basket[temCount].price
		}
		return total
	}
	
	// 将暴露的公有指针指向私有函数和属性
	return {
		addItem: addItemPublic,
		getItemCount: getItemCountPublic,
		getTotal: getTotalPublic
	}
}){}