设计模式并非是难以理解, 或是难以应用到实践中的, 相反的, 设计模式恰恰代表了某些场景下的最佳实践! 这些设计模式通常被有经验的开发者们所采用。
设计模式是开发者们在开发过程中面临的一般问题的解决方案。 这些解决方案是众多开发者们经过长时间的实验和错误所总结出来的
本文将讲解前端 (javascript) 的设计模式概念!
工厂模式是程序中相当常用的一种设计模式, 工厂模式在创建对象时, 无需指定创建对象的具体类, 原因是 工厂模式中定义了一个用于创建对象的接口, 这个接口决定了实例化哪一个子类, 而子类可以重写接口方法以便创建的时候指定自己的对象类型！
另外工厂模式不使用new来获取对象, 工厂模式分为2种, 第一种是简单工厂模式, 第二种是抽象工厂模式
抽象工厂模式
抽象工厂模式相对于简单工厂更加灵活, 因为它将方法都交给子类来完成, 本身并不提供任何方法
何时使用抽象工厂模式
- 当处理很多共享相同属性的小型对象和组件时
- 当需要根据所在不同环境来创建不同构造函数的实例时
- 当每个子类方法的内部实现不同时
下面是一个简单的例子, 可以看出抽象工厂类AbstractFactory并不提供任何有效的方法, 方法都会被子类重写
// 抽象工厂类
function AbstractFactory() {};
// 虚方法
AbstractFactory.prototype.toName = function() {
throw Error('抽象方法不能被调用！');
};
// 生产函数
AbstractFactory.factory = function(say) {
var Say = AbstractFactory[say];
if (Say) {
return new Say;
}
}
// 子类
AbstractFactory.SayHello = function() {
this.name = 'hello';
}
// 子类的方法
AbstractFactory.SayHello.prototype = {
toName: function() {
return this.name;
}
}
下面是一个适当的例子, 当工厂生产的子类的方法实现都截然不同, 但总体的逻辑是相同的时候, 比较适合抽象工厂模式
// 抽象工厂类
function Input() {};
// 虚方法
Input.prototype.getValue = function() {
throw Error('抽象方法不能被调用！');
};
// 生产函数
Input.factory = function(type, option) {
var input = Input[type];
if (input) {
return new input(option);
}
}
// 子类
Input.Text = function(option) {
if (option) {
this.value = option.value;
}
}
// 子类的方法
Input.Text.prototype = {
getValue: function() {
return 'text类型的value是' + this.value;
}
}
// 子类
Input.Password = function(option) {
if (option) {
this.value = option.value;
}
}
// 子类的方法
Input.Password.prototype = {
getValue: function() {
return 'password类型的value是' + this.value;
}
}
var text = Input.factory('Text', {value: 'hello world!'});
var password = Input.factory('Password', {value: '123456'});
text.getValue(); // text类型的value是hello world!
password.getValue(); // password类型的value是123456
其他设计模式
单例模式: https://www.jianshu.com/p/4c0604f116ba
构造函数模式: https://www.jianshu.com/p/cf809d980459
建造者模式: https://www.jianshu.com/p/70cf4bb80549
简单工厂模式: https://www.jianshu.com/p/4293450926c2
装饰者模式: https://www.jianshu.com/p/16cf284ab810
外观模式: https://www.jianshu.com/p/179ae2a13c59
