设计模式并非是难以理解, 或是难以应用到实践中的, 相反的, 设计模式恰恰代表了某些场景下的最佳实践! 这些设计模式通常被有经验的开发者们所采用。
设计模式是开发者们在开发过程中面临的一般问题的解决方案。 这些解决方案是众多开发者们经过长时间的实验和错误所总结出来的
本文将讲解前端 (javascript) 的设计模式概念!
工厂模式是程序中相当常用的一种设计模式, 工厂模式在创建对象时, 无需指定创建对象的具体类, 原因是 工厂模式中定义了一个用于创建对象的接口, 这个接口决定了实例化哪一个子类, 而子类可以重写接口方法以便创建的时候指定自己的对象类型！
另外工厂模式不使用new来获取对象, 工厂模式分为2种, 第一种是简单工厂模式, 第二种是抽象工厂模式
简单工厂模式
简单工厂模式产出的实例会共享同一组方法, 因此通常需要属性名是一致的
何时使用简单工厂模式
- 当处理很多共享相同属性的小型对象和组件时
- 当需要根据所在不同环境来创建不同构造函数的实例时
下面是一个简单的例子, 可以看出他们的方法来自工厂类Factory, 而属性都来自每个子类
function Factory(type) {
var typeObj = Factory[type];
if (typeObj) {
typeObj.prototype = new Factory;
return new typeObj;
}
}
Factory.prototype.toName = function() {
return this.name;
}
Factory.SayHello = function() {
this.name = 'hello';
}
Factory.SayYes = function() {
this.name = 'yes';
}
Factory('SayHello');
Factory('SayYes');
下面是一个适当的例子
// 工厂类
function Factory() {};
// 生产函数
Factory.factory = function(type, option) {
// 检查工厂中是否有匹配的子类
var Input = Factory[type];
// 如果存在则实例化相应的子类, 并为子类绑定prototype
// 如果没有匹配项, 则抛出一个异常
if (Input) {
Input.prototype = new Factory;
var input = new Input(option);
return input;
} else {
throw new Error('没有指定的子类', type);
}
}
// 工厂方法
Factory.prototype.getValue = function() {
return this.value;
}
Factory.prototype.getType = function() {
return this.type;
}
// 子类Text
Factory.Text = function(option) {
this.type = 'text';
if (option) {
this.value = option.value;
}
}
// 子类Password
Factory.Password = function(option) {
this.type = 'password';
if (option) {
this.value = option.value;
}
}
// 利用工厂 Factory 生成一个 Text 实例
var text = Factory.factory('Text', {value: 'hello world!'});
text.getValue(); // hello world!
// 利用工厂 Factory 生成一个 Password 实例
var password = Factory.factory('Password', {value: '123456'});
password.getValue(); // 123456
其他设计模式
单例模式: https://www.jianshu.com/p/4c0604f116ba
构造函数模式: https://www.jianshu.com/p/cf809d980459
建造者模式: https://www.jianshu.com/p/70cf4bb80549
抽象工厂模式: https://www.jianshu.com/p/d6138f36e6e2
装饰者模式: https://www.jianshu.com/p/16cf284ab810
外观模式: https://www.jianshu.com/p/179ae2a13c59
