Javascript设计模式 - 04 -工厂模式(简单工厂,抽象工厂)
简介
工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类,该模式使一个类的实例化延迟到了子类,而子类可以重写接口方法以便创建的时候指定自己的对象类型
个人理解
简单工厂模式接受一个命令,然后将命令的处理分离出去,命名处理函数接受不同的命令,或者根据不同的环境返回不同的对象,返回的对象会在工厂中绑定一些公用的‘零件’(主要是方法)最后返回一个加工后的商品的实例
// 创建不同交通工具 Transport
function Car() {
this.name = 'transport-car';
}
function Train() {
this.name = 'transport-train';
}
function Bike() {
this.name = 'transport-bike';
}
// 定义命令处理函数
function selectTransport(type) {
var transport;
switch (type) {
case 'car':
transport = new Car();
break;
case 'train':
transport = new Train();
break;
case 'bike':
transport = new Bike();
break;
default:
transport = new Car();
break;
}
return transport;
}
// 创建工厂
function Factory() {
this.count = 0;
}
Factory.prototype.create = function (type) {
var me = this;
var transport = selectTransport(type);
// 绑定公有的方法
transport.intro = function () {
console.log('this is ' + this.name + ' count: ' + me.count++);
}
return transport;
}
// 实例化工厂
var factory = new Factory();
// 开始创建
var train = factory.create('train');
train.intro(); // this is transport-train count: 0
// 再创建
var bike = factory.create('bike');
bike.intro(); // this is transport-bike count: 1
抽象工厂模式相比于简单工厂模式,真正使用的‘工厂’,是我们抽象出来的工厂的一个子类,同时,命令处理函数不在定义在外边,而是定义在子类的原型上,这样有不同的组装需求,只需要从抽象工厂上继承一个子类,在子类中定义新的命令处理方式就行了。
// 创建一个用于继承的函数
function extend(subClass, superClass) {
// 定义一个中介类
function F() {}
// 原型指向父类的原型
F.prototype = superClass.prototype;
/*
子类的原型指向中介类的一个实例,实现继承
由于 subClass 的原型指向的是 F 的一个实例 而不是 F.prototype 也就是 父类的原型,
所以子类原型的修改不会将父类的原型也修改掉
*/
subClass.prototype = new F();
// 上一步得到的子类的原型的构造函数是 Factory ,这里需要把它变回自己本身
subClass.prototype.constructor = subClass;
}
// 创建不同交通工具 Transport
function Car() {
this.name = 'transport-car';
}
function Train() {
this.name = 'transport-train';
}
function Bike() {
this.name = 'transport-bike';
}
// 创建工厂
function Factory() {
}
Factory.prototype.create = function (type) {
var me = this;
// 注:这里改为了调用自身的 selectTransport 方法,Factory 本身没有这个方法,这个方法是子类定义的
var transport = this.selectTransport(type);
// 绑定公有的方法
transport.intro = function () {
console.log('this is ' + this.name + ' count: ' + me.count++);
}
return transport;
}
// 新增子类的创建
function TransportFactory() {
this.count = 0;
};
extend(TransportFactory, Factory); // 继承工厂
// 子类定义 selectTransport 方法,定义前一定要先继承父类,否则会被覆盖
TransportFactory.prototype.selectTransport = function (type) {
var transport;
switch (type) {
case 'car':
transport = new Car();
break;
case 'train':
transport = new Train();
break;
case 'bike':
transport = new Bike();
break;
default:
transport = new Car();
break;
}
return transport;
}
// 实例化工厂
var factory = new TransportFactory();
// 开始创建
var train = factory.create('train');
train.intro();
// 再创建
var bike = factory.create('bike');
bike.intro();
文章列表
- javascript设计模式 – 设计原则
- JavaScript设计模式–高阶函数
- Javascript 设计模式 - 01 - 原型模式
- Javascript 设计模式 - 02 - 单例模式
- Javascript 设计模式 - 03 - 建造者模式
- Javascript 设计模式 - 04 - 工厂模式
- Javascript 设计模式 - 05 - 外观模式
- Javascript 设计模式 - 06 - 代理模式
- Javascript 设计模式 - 07 - 观察者模式(发布订阅模式)
- Javascript 设计模式 - 08 - 策略模式
- Javascript 设计模式 - 09 - 命令模式
- Javascript 设计模式 - 10 - 迭代器模式
- Javascript 设计模式 - 11 - 职责链模式
- Javascript 设计模式 - 12 - 适配器模式
- Javascript 设计模式 - 13 - 模板方法
- Javascript 设计模式 - 14 - 组合模式
- Javascript 设计模式 - 15 - 享元模式
- Javascript 设计模式 - 16 - 中介者模式
- Javascript 设计模式 - 17 - 装饰者模式
- Javascript 设计模式 - 18 - 状态模式