在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
}
}){}