本文深入解析JavaScript中的构造器模式与模块模式。通过对比基础构造器与带原型构造器的优劣，阐述原型共享机制。同时介绍对象字面量及Module模式，利用闭包实现私有与公有成员的封装，帮助开发者优化代码结构并减少全局污染。
引言
首要明确：何谓模式？
模式系针对特定常见难题所设计的卓越方案。其通常历经实践检验，具备针对某类问题的可复用性。设计模式有别于编程模式，且与具体编程语言无关。
1. Constructor构造器模式
1.1基础Constructor构造器模式
// 使用函数来模拟一个Car类
function Car(model,year,miles) {
this.model = model ;
this.year = year;
this.miles = miles;
this.toString = function () {
return this.model + "已经行驶了" + this.miles + "米";
}
}
//调用
var honda = new Car("东风Honda",2009,20000);//实例化Car
//输出结果
console.log(honda.toString());局限性：
- 继承操作存在困难；
- toString()方法为每个通过Car构造器生成的新实例单独重新定义。此种做法欠妥，因该函数应在所有Car类实例间共享。
1.2进阶 带原型的Constructor构造器模型
function Car(model,year,miles) {
this.model = model ;
this.year = year;
this.miles = miles;
//每个对象都有构造器原型的所有属性。
Car.prototype.toString = function() {
return this.model + "已经行驶了" + this.miles + "米";
}
}
//调用
var honda = new Car("东风Honda",2009,20000);//实例化Car
console.log(honda.toString());优势：
- toString()的单一实例得以在所有Car对象间共享。
2. Module 模块模式
模块有助于清晰分离并组织项目内的代码单元。
JavaScript中存在多种实现模块的方式：
- 对象字面量表示法；
- Module模式
- AMD模块
- CommonJs模块
- ES Harmony模块
本文重点阐述“对象字面量”表示法。
2.1对象字面量
示例：
<script type="text/javascript">
const myObjectLiteral = {
varibaleKey : varibaleValue,
function: function () {
//实现
}
};
</script>注意：
- 对象字面量无需使用 new 进行实例化；
- 不可置于语句开头，否则可能被解析为代码块的起始；
2.2 Module（模块）模式
在JS中，Module模式用于进一步模拟类概念。它使单一对象具备公有与私有方法及变量，从而屏蔽全局作用域中的特殊部分，进而降低与其他脚本冲突的风险。
其中，私有部分主要利用“闭包”。因闭包存在，声明的变量与方法仅在该模式内部可用。但在返回对象上定义的变量与方法，外部使用者可调用。
一个关于购物车的例子：
<script type="text/javascript">
const basketModule = (function() {
//私有
let baskey = [];
function doSomethingPrivate () {
//实现
}
function doSomethingElsePrivate() {
//实现
}
//返回一个暴露出的公有对象API
return {
//添加item到购物车
addItem: function (values) {
basket.push(values);
},
//获取购物车里的item数
getItemCount: function() {
return basket.length;
},
//私有函数的公有形式别名
doSomething: doSomethingPrivate,
//获取购物车里所有item的价格总值
getTotal: function() {
let itemCount = this.getItemCount(),
total = 0;
while (itemCount--) {
total += basket[itemCount].price;
}
return total;
}
}
})();
//交互
basketModule.addItem({
item: "bread",
price: 0.5
});
basketModule.addItem({
item: "酱油",
price: 1.5
});
//输出结果
console.log(basketModule.getItemCount());//2
console.log(basketModule.getTotal());//0.5+1.5 = 2
//注意
console.log(basketModule.basket);//underfined。因为basket没有暴露在公有的API中
</script>优点：
- 代码整洁；
- 支持私有数据。在 Module 模式中，代码的公有部分能够接触到私有部分，而外部代码无法接触到类的私有部分。
缺点：
- 可见性需要改变时，需要修改每一处使用过该成员的地方；
- 无法访问之后在方法中添加的私有成员；
- 无法为私有成员创建自动化测试单元；
到此这篇关于Javascript Constructor构造器模式与Module模块模式的文章就介绍到这了,更多相关Javascript Constructor 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！