javascript设计模式-抽象工厂模式

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抽线工厂</title>
</head>
<body>
 
<script>
/**
 * 抽象工厂模式
 *
 * 定义: 提供一个创建一系列相关或相互依赖对象的接口,而无需制定它们具体的类。
 *
 * 本质:
 * 选择产品簇的实现。
 *
 * 功能:
 * 为一系列相关对象或相互依赖的对象创建一个接口。这个接口内的方法不是任意堆砌的,而是一系列相关或相互依赖的方法。
 * 从某种意义上看,抽象工厂其实是一个产品系列,或者是产品簇。
 *
 * 使用工厂方法来实现抽象工厂。
 *
 * 工厂方法是选择单个产品的实现,虽然一个类里面可以有多个工厂方法,但是这些方法之间一般是没有联系的,即使看起来像有联系。
 * 但是抽象工厂着重的就是为一个产品簇选择实现,定义在抽象工厂里面的方法通常是由联系的,它们都是产品的某一部分或者是相互依赖的。如果抽象工厂里面只定义一个方法,直接创建产品,那么就退化成为工厂方法。
 *
 * 何时使用?
 * 1.如果希望一个系统独立于它的产品的创建,组合和表示的时候。也就是一个系统只是知道产品的接口,而不关心实现的时候、
 * 2.如果一个系统要由多个产品系列中的一个来配置的时候。也就是可以动态地切换产品簇的时候。
 * 3.如果要强调一系列相关产品的接口,以便联合使用它们的时候。
 *
 * 优点:
 * 分离接口和实现
 * 使得切换产品簇变得容易
 *
 * 缺点:
 * 不太容易扩展新产品
 * 容易造成雷层次复杂
 *
 * 抽象工厂模式和单例模式
 * 这两个模式可以组合使用。
 * 在抽象工厂模式里面,具体的工厂实现,在整个应用中,通常一个产品系列只需要一个实例就可以了,因此可以把具体的工厂实现成为单例。
 *
 */
// 示例代码:
/**
 * 抽象工厂的接口,声明创建抽象产品对象的操作
 */
var AbstractFactory = function(){};
AbstractFactory.prototype = {
  /**
   * 示例方法,创建抽象产品A的对象
   * @return {[type]} 抽象产品A的对象
   */
  createProductA: function(){},
  // 创建抽象产品B
  createProductB: function(){}
};
 
/**
 * 抽象产品A,B的接口
 */
var AbstractProductA = function(){};
// ...
var AbstractProductB = function(){};
// ...
 
// 产品A的实现
var ProductA1 = function(){};
extend(productA1, AbstractProductA);
// ...
 
var ProductA2 = function(){};
extend(productA2, AbstractProductA);
// ...
 
// 产品B的实现
var ProductB1 = function(){};
extend(productA1, AbstractProductB);
// ...
 
var ProductB2 = function(){};
extend(productB2, AbstractProductB);
// ...
 
/**
 * 具体的工厂实现对象,实现创建具体的产品对象的操作
 */
var ConcretFactory1 = function(){};
extend(ConcretFactory1, AbstractFactory);
ConcretFactory1.prototype.createProductA = function(){
  return new ProductA1();
};
ConcretFactory1.prototype.createProductB = function(){
  return new ProductB1();
};
 
var ConcretFactory2 = function(){};
extend(ConcretFactory2, AbstractFactory);
ConcretFactory2.prototype.createProductA = function(){
  return new ProductA2();
};
ConcretFactory2.prototype.createProductB = function(){
  return new ProductB2();
};
 
// 客户端
var af = new ConcretFactory1();
af.createProductA();
af.createProductB();
 
 
// 示例2
var AMDCPU = function(id){
  this.id = id;
};
var MSIMainboard = function(id){
  this.id = id;
};
 
var Schema1 = function(){};
Schema1.prototype = {
  createCPUApi: function(){
    return new AMDCPU(939);
  },
  createMainboardApi: function(){
    return new MSIMainboard(939);
  }
};
 
var Schema2 = function(){};
Schema2 = {
  createCPUApi: function(){
    return new AMDCPU(1000);
  },
  createMainboardApi: function(){
    return new MSIMainboard(1000);
  }
};
 
var ComputerEngineer = (function(){
  var cpu;
  var mainboard;
 
  function prepareHardWare(schema){
    cpu = schema.createCPUApi();
    mainboard = schema.createMainboardApi();
    console.log(‘prepared‘);
  }
 
  var ComputerEngineer = function(){
    cpu = null;
    mainboard = null;
  };
  ComputerEngineer.prototype = {
    makeComputer: function(schema){
      prepareHardWare(schema);
    }
  };
 
  return ComputerEngineer;
}());
 
var engineer = new ComputerEngineer();
var schema = new Schema1();
engineer.makeComputer(schema);
engineer = schema = null;
 
 
 
function Employee(name) {
  this.name = name;
  this.say = function () {
    log.add("I am employee " + name);
  };
}
 
function EmployeeFactory() {
  this.create = function(name) {
    return new Employee(name);
  };
}
 
function Vendor(name) {
  this.name = name;
  this.say = function () {
    log.add("I am vendor " + name);
  };
}
 
function VendorFactory() {
  this.create = function(name) {
    return new Vendor(name);
  };
}
 
// log helper
var log = (function () {
  var log = "";
  return {
    add: function (msg) { log += msg + "\n"; },
    show: function () { alert(log); log = ""; }
  }
})();
 
 
function run() {
 
  var persons = [];
 
  var employeeFactory = new EmployeeFactory();
  var vendorFactory = new VendorFactory();
 
  persons.push(employeeFactory.create("Joan DiSilva"));
  persons.push(employeeFactory.create("Tim O‘Neill"));
 
  persons.push(vendorFactory.create("Gerald Watson"));
  persons.push(vendorFactory.create("Nicole McNight"));
 
  for (var i = 0, len = persons.length; i < len; i++) {
    persons[i].say();
  }
 
  log.show();
}
</script>
</body>
</html>

  

javascript设计模式-抽象工厂模式

上一篇:javascript设计模式--中介者模式(Mediator)


下一篇:ASP.NET MVC5 网站开发实践(二) - 用户部分(2)用户登录、注销