工厂模式

概念

工厂模式是一种关注对象创建概念的创建模式。它的领域中同其它模式的不同之处在于它并没有明确要求我们使用一个构造器。取而代之,一个工厂能提供一个创建对象的公共接口,可以在其中指定我们希望被创建的工厂对象的类型。

应用场景

试想一下,在我们被要求创建一种类型的UI组件时,我们就有一个UI工厂。并不是通过直接使用new操作符或者通过另外一个构造器来创建这个组件,我们取而代之的向一个工厂对象索要一个新的组件。我们告知工厂我们需要什么类型的组件(例如:“按钮”,“面板”),而它会将其初始化,然后返回供我们使用。

工厂模式

使用构造器模式逻辑来定义汽车,使用工厂模式来定义 Vehicle 工厂的一个示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// Types.js - Constructors used behind the scenes

function Car( options ) {
this.doors = options.doors || 4;
this.state = options.state || "brand new";
this.color = options.color || "silver";
}

function Truck( options){
this.state = options.state || "used";
this.wheelSize = options.wheelSize || "large";
this.color = options.color || "blue";
}

// FactoryExample.js - Define a skeleton vehicle factory

function VehicleFactory() {}

VehicleFactory.prototype.vehicleClass = Car;

VehicleFactory.prototype.createVehicle = function ( options ) {
if( options.vehicleType === "car" ){
this.vehicleClass = Car;
}else{
this.vehicleClass = Truck;
}
return new this.vehicleClass( options );
};

// Test
var carFactory = new VehicleFactory();
var car = carFactory.createVehicle( {
vehicleType: "car",
color: "yellow",
doors: 6 } );

console.log( car instanceof Car ); // true

console.log( car ); // Car object of color "yellow", doors: 6 in a "brand new" state

抽象工厂模式

它的目标是以一个通用的目标将一组独立的工厂进行封装,将一堆对象的实现细节从它们的一般用例中分离。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var AbstractVehicleFactory = (function () {
var types = {}; // 用来存储各个工厂类型
return {
getVehicle: function ( type, customizations ) {
var Vehicle = types[type];
return (Vehicle ? new Vehicle(customizations) : null);
},

registerVehicle: function ( type, Vehicle ) {
var proto = Vehicle.prototype;
if ( proto.drive && proto.breakDown ) {
types[type] = Vehicle; // 注册工厂
}
return AbstractVehicleFactory;
}
};
})();


// Test
AbstractVehicleFactory.registerVehicle( "car", Car );
AbstractVehicleFactory.registerVehicle( "truck", Truck );

var car = AbstractVehicleFactory.getVehicle( "car" , {
color: "lime green",
state: "like new" } );

var truck = AbstractVehicleFactory.getVehicle( "truck" , {
wheelSize: "medium",
color: "neon yellow" } );

参考

  1. 学习 JavaScript 设计模式 - 工厂模式
坚持原创技术分享,您的支持将鼓励我继续创作!