1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>State Pattern</title>
6 </head>
7 <body>
8
9 <script>
10 /**
11 * 状态模式
12 *
13 * 定义：
14 * 允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
15 *
16 * 本质：
17 * 根据状态来分离和选择行为
18 *
19 * 1.状态和行为
20 * 所谓对象的状态，通常指的就是对象实例的属性的值；而行为指的就是对象的功能，再具体点，行为大多可以对应到方法上。
21 * 状态模式的功能就是分离状态和行为，通过维护状态的变化，来调用不同状态的的不同功能。
22 * 也就是说，状态和行为是相关联的，它们的关系可以描述为：状态决定行为。
23 *
24 * 2.行为的平行性
25 * 平行性指的是各个状态的行为所处的层次是一样的，相互是独立的，没有关联的，是根据不同的状态来决定到底走平行线哪一条。行为是不用的，当然对应的实现也是不同的，相互之间是不可替换的。
26 * 平等性强调的是可替换性，大家是同一行为的不同描述或实现，因此在同一个行为发生的时候，可以根据条件挑选任意的一个实现来进行相应的处理。
27 * 状态模式和策略模式的结构完全一样。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。
28 *
29 * 3.上下文和状态处理对象呢
30 * 在状态模式中，上下文是持有状态的对象，但是上下文自身并不处理跟状态相关的行为，而是把处理状态的功能委托给了状态对应的状态处理类来处理。
31 * 在具体的状态处理类中经常需要获取上下文自身的数据，甚至在必要的时候会回调上下文的方法，因此，通常将上下文自身当作一个参数传递给具体的状态处理类。
32 * 客户端一般只和上下文交互。客户端可以用状态对象来配置一个上下文，一旦配置完毕，就不需要再和状态对象打交道了。
33 *
34 * 4.不完美的OCP体验
35 * 由于状态的维护和转换在状态模式结构里面，不管你是扩展了状态实现类，还是新添加了状态实现类，都需要修改状态维护和转换的地方。
36 *
37 * 5.创建和销毁状态对象
38 * 究竟何时创建和销毁状态对象？
39 * 1）当需要使用状态对象的时候创建，使用完后销毁它们
40 * 2）提前创建它们并始终不销毁。
41 * 3）采用延迟加载和缓存合用的方式，就是当第一次需要使用状态对象的时候创建，使用完后并不销毁对象，而是把这个对象缓存起来，等待下一次使用，而且在合适的时候，会有缓存框剪销毁状态对象。
42 * 如果状态在运行时是不可知的，而且上下文比较稳定，建议选择1.
43 * 如果状态改变很频繁，而且状态对象还存储着大量的数据信息，建议选择2.
44 * 如果无法确定状态改变是否频繁，而且有些状态对象的状态数据量大，有些较小，建议选择3.
45 *
46 * 6.状态模式的调用顺序
47 * 在Context中进行状态的维护和转换：
48 * 1）调用上下文的方法来处理业务请求。
49 * 2）判断并维护状态。
50 * 3）根据状态来调用相应的状态处理对象的方法。
51 *
52 * 采用让状态对象来维护和转换状态的调用顺序
53 * 1）调用上下文的方法来处理业务请求。
54 * 2）获取State对象。
55 * 3）委托让相应的状态对象去处理。
56 * 4）调用构造方法得到下一个状态对象的实例。
57 * 5）设置下一个状态处理对象。
58 * 6）再到6），直到结束。
59 *
60 * 状态的维护和转换控制
61 * 所谓状态的维护，指的是维护状态的数据，给状态设置不用的状态值；而状态的转换，指的是根据状态的变化来选择不用的状态处理对象。在状态模式中，通常有两个地方可以进行状态的维护和转换控制。
62 * 一个就是在上下文中。因为状态本身通常被实现为上下文对象的状态，因此可以在上下文中进行状态维护，当然也就可以控制状态的转换了。
63 * 另外一个地方就是在状态的处理类中。当每个状态处理对象处理完自身状态所对应的功能后，可以根据需要指定后继状态，以便让应用能正确处理后继的请求。
64 *
65 * 如何选择这两种方式？
66 * 1.如果状态转换的规则是一定的，一般不需要进行什么扩展规则，那么就适合在上下文中统一进行状态的维护。
67 * 2.如果状态的转换取决于前一个状态动态处理的结果，或者是依赖于外部数据，为了增强灵活性，这种情况下，一般是在状态处理类中进行状态的维护。
68 *
69 * 还可以使用数据库来维护状态
70 *
71 */
72
73 (function () {
74 // 示例代码
75
76 // 实现一个与Context的一个特定状态相关的行为
77 function ConcreteStateA() {}
78
79 ConcreteStateA.prototype.handle = function () {};
80
81 function ConcreteStateB() {}
82
83 ConcreteStateB.prototype.handle = function () {};
84
85 // 定义客户感兴趣的接口，通常会维护一个State的对象实例
86 function Context(state) {
87 this.state = state;
88 }
89
90 Context.prototype = {
91 request: function (param) {
92 this.state.handle(param);
93 }
94 };
95 }());
96
97 (function () {
98 // 示例
99
100 function NormalVoteState() {}
101
102 NormalVoteState.prototype.vote = function (user, voteItem, voteManager) {
103 voteManager.mapVote[user] = voteItem;
104 };
105
106 function RepeatVoteState() {}
107
108 RepeatVoteState.prototype.vote = function (user, voteItem, voteManager) {
109 console.log('请不要重复投票');
110 };
111
112 function SpliteVoteState() {}
113
114 SpliteVoteState.prototype.vote = function (user, coteItem, voteManager) {
115 var s = voteManager.mapVote[user];
116 if (s) {
117 delete voteManager.mapVote[user];
118 }
119
120 console.log('你有恶意刷票行为，取消投票资格');
121 };
122
123 function BlackVoteState() {}
124
125 BlackVoteState.prototype.vote = function (user, voteItem, voteManager) {
126 console.log('进入黑名单，将禁止登录和使用本系统');
127 };
128
129 function VoteManager() {
130 this.state = null;
131 this.mapVote = {};
132 this.mapVoteCount = {};
133 }
134
135 VoteManager.prototype = {
136 vote: function (user, voteItem) {
137 var oldVoteCount = this.mapVoteCount[user] || 0;
138
139 this.mapVoteCount[user] = ++oldVoteCount;
140
141 if (oldVoteCount == 1) {
142 this.state = new NormalVoteState();
143 } else if (oldVoteCount > 1 && oldVoteCount < 5) {
144 this.state = new RepeatVoteState();
145 } else if (oldVoteCount >= 5 && oldVoteCount < 8) {
146 this.state = new SpliteVoteState();
147 } else if (oldVoteCount >= 8) {
148 this.state = new BlackVoteState();
149 }
150
151 this.state.vote(user, voteItem, this);
152 }
153 };
154
155 var vm = new VoteManager();
156 for (var i = 0; i < 8; i++) {
157 vm.vote('u1', 'A');
158 }
159
160
161 // another
162 var States = {
163 normal: function (user, voteItem, voteManager) {
164 voteManager.mapVote[user] = voteItem;
165 },
166 repeat: function (user, voteItem, voteManager) {
167 console.log('请不要重复投票');
168 },
169 splite: function (user, coteItem, voteManager) {
170 var s = voteManager.mapVote[user];
171 if (s != null) {
172 delete voteManager.mapVote[user];
173 }
174
175 console.log('你有恶意刷票行为，取消投票资格');
176 },
177 black: function (user, voteItem, voteManager) {
178 console.log('进入黑名单，将禁止登录和使用本系统');
179 }
180 };
181
182 function VoteManager2() {
183 this.state = null;
184 this.mapVote = {};
185 this.mapVoteCount = {};
186 }
187
188 VoteManager2.prototype = {
189 vote: function (user, voteItem) {
190 var oldVoteCount = this.mapVoteCount[user] || 0;
191
192 this.mapVoteCount[user] = ++oldVoteCount;
193
194 var state;
195 if (oldVoteCount == 1) {
196 state = 'normal';
197 } else if (oldVoteCount > 1 && oldVoteCount < 5) {
198 state = 'repeat';
199 } else if (oldVoteCount >= 5 && oldVoteCount < 8) {
200 state = 'splite';
201 } else if (oldVoteCount >= 8) {
202 state = 'black';
203 }
204
205 this.state = States[state];
206
207 this.state(user, voteItem, this);
208 }
209 };
210
211 var vm = new VoteManager2();
212 for (var i = 0; i < 8; i++) {
213 vm.vote('u1', 'A');
214 }
215 }());
216
217 (function () {
218 // 在状态处理类中进行后继状态的维护和转换
219
220 function NormalVoteState() {
221 this.vote = function (user, voteItem, voteManager) {
222 voteManager.mapVote[user] = voteItem;
223 console.log('恭喜你投票成功');
224 // 正常投票完毕，维护下一个状态，同一个人再投票就重复了
225 voteManager.mapState[user] = new RepeatVoteState();
226 };
227 }
228
229 function RepeatVoteState() {
230 this.vote = function (user, voteItem, voteManager) {
231 console.log('请不要重复投票');
232 if (voteManager.mapVoteCount[user] >= 4) {
233 voteManager.mapState[user] = new SpliteVoteState();
234 }
235 };
236 }
237
238 function SpliteVoteState() {
239 this.vote = function (user, voteItem, voteManager) {
240 var s = voteManager.mapVote[user];
241
242 if (s != null) {
243 delete voteManager.mapVote[user];
244 }
245
246 console.log('你有恶意刷票行为，取消投票资格');
247
248 if (voteManager.mapVoteCount[user] >= 7) {
249 voteManager.mapState[user] = new BlackVoteState();
250 }
251 };
252 }
253
254 function BlackVoteState() {
255 this.vote = function (user, voteItem, voteManager) {
256 console.log('进入黑名单，将禁止登录和使用本系统');
257 };
258 }
259
260 function VoteManager() {
261 this.mapState = {};
262 this.mapVote = {};
263 this.mapVoteCount = {};
264
265 this.vote = function (user, voteItem) {
266 var oldVoteCount = this.mapVoteCount[user];
267
268 if (oldVoteCount == null) {
269 oldVoteCount = 0;
270 }
271 this.mapVoteCount[user] = ++oldVoteCount;
272
273 var state = this.mapState[user];
274 if (state == null) {
275 state = new NormalVoteState();
276 }
277
278 state.vote(user, voteItem, this);
279 };
280 }
281
282
283 var vm = new VoteManager();
284 for (var i = 0; i < 8; i++) {
285 vm.vote('u1', 'A');
286 }
287
288 // another way
289
290 function VoteManager2() {
291 var mapState = {};
292 var mapVote = {};
293 var mapVoteCount = {};
294
295 this.vote = function (user, voteItem) {
296 var oldVoteCount = mapVoteCount[user];
297
298 if (oldVoteCount == null) {
299 oldVoteCount = 0;
300 }
301 mapVoteCount[user] = ++oldVoteCount;
302
303 var state = mapState[user];
304 if (state == null) {
305 state = voteNormal;
306 }
307
308 state(user, voteItem);
309 };
310
311 function voteNormal(user, voteItem) {
312 mapVote[user] = voteItem;
313 console.log('恭喜你投票成功');
314 // 正常投票完毕，维护下一个状态，同一个人再投票就重复了
315 return mapState[user] = voteRepeat;
316 }
317
318 function voteRepeat(user, voteItem) {
319 console.log('请不要重复投票');
320 if (mapVoteCount[user] >= 4) {
321 return mapState[user] = voteSplite;
322 }
323 }
324
325 function voteSplite(user, voteItem) {
326 var s = mapVote[user];
327
328 if (s != null) {
329 delete mapVote[user];
330 }
331
332 console.log('你有恶意刷票行为，取消投票资格');
333
334 if (mapVoteCount[user] >= 7) {
335 return mapState[user] = voteBlack;
336 }
337 }
338
339 function voteBlack(user, voteItem) {
340 console.log('进入黑名单，将禁止登录和使用本系统');
341 }
342 }
343
344 var vm = new VoteManager2();
345 for (var i = 0; i < 8; i++) {
346 vm.vote('u1', 'A');
347 }
348 }());
349
350 (function () {
351 // 模拟工作流
352 /*
353 请假流程，需项目经理和部门经理审批
354 */
355
356 // 公共状态处理机
357 function LeaveRequestContext() {
358 // 持有一个状态对象
359 this.state = null;
360 // 包含流程处理需要的业务数据对象
361 this.businessVO = null;
362 }
363
364 LeaveRequestContext.prototype = {
365 // 执行工作
366 doWork: function () {
367 this.state.doWork(this);
368 }
369 };
370
371 // 定义请假单的业务数据模型
372 function LeaveRequestModel() {
373 // 请假人
374 this.user = '';
375 // 请假开始时间
376 this.beginDate = '';
377 // 请假天数
378 this.leaveDays = '';
379 // 审核结果
380 this.result = '';
381 }
382
383 function ProjectManagerState() {
384 this.doWork = function (request) {
385 var leaveRequestModel = request.businessVO;
386
387 console.log('项目经理审核中，请稍候。。');
388 console.log(leaveRequestModel.user + '申请从'
389 + leaveRequestModel.beginDate + '开始请假'
390 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');
391
392 var answer = window.prompt('1为同意，2为不同意');
393 var result = answer == 1 ? '同意' : '不同意';
394 leaveRequestModel.result = '项目经理审核结果：' + result;
395
396 if (answer == 1) {
397 if (leaveRequestModel.leaveDays > 3) {
398 request.state = new DepManagerState();
399 } else {
400 request.state = new AuditOverState();
401 }
402 } else {
403 request.state = new AuditOverState();
404 }
405
406 request.doWork();
407 };
408 }
409
410 function DepManagerState() {
411 this.doWork = function (request) {
412 var leaveRequestModel = request.businessVO;
413
414 console.log('部门经理审核中，请稍候。。');
415 console.log(leaveRequestModel.user + '申请从'
416 + leaveRequestModel.beginDate + '开始请假'
417 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');
418
419 var answer = window.prompt('1为同意，2为不同意');
420 var result = answer == 1 ? '同意' : '不同意';
421 leaveRequestModel.result = '部门经理审核结果：' + result;
422
423 request.state = new AuditOverState();
424
425 request.doWork();
426 };
427 }
428
429 function AuditOverState() {
430 this.doWork = function (request) {
431 var leaveRequestModel = request.businessVO;
432 // do sth
433 console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);
434 };
435 }
436
437 var lrm = new LeaveRequestModel();
438 lrm.user = '小林';
439 lrm.beginDate = '2014-4-2';
440 lrm.leaveDays = 5;
441
442 var request = new LeaveRequestContext();
443 request.businessVO = lrm;
444 request.state = new ProjectManagerState();
445
446 request.doWork();
447
448
449 // another
450
451 function LeaveRequestContext2() {
452 this.state = null;
453 // 包含流程处理需要的业务数据对象
454 this.businessVO = null;
455 this.doWork = function () {
456 if (typeof this.state == 'function') {
457 this.state = this.state(this);
458 this.doWork();
459 }
460 };
461 }
462
463 function projectManagerState(request) {
464 var leaveRequestModel = request.businessVO;
465
466 console.log('项目经理审核中，请稍候。。');
467 console.log(leaveRequestModel.user + '申请从'
468 + leaveRequestModel.beginDate + '开始请假'
469 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');
470
471 var answer = window.prompt('1为同意，2为不同意');
472 var result = answer == 1 ? '同意' : '不同意';
473 leaveRequestModel.result = '项目经理审核结果：' + result;
474
475 var state;
476 if (answer == 1) {
477 if (leaveRequestModel.leaveDays > 3) {
478 state = depManagerState;
479 } else {
480 state = auditOverState;
481 }
482 } else {
483 state = auditOverState;
484 }
485
486 return state;
487 }
488
489 function depManagerState(request) {
490 var leaveRequestModel = request.businessVO;
491
492 console.log('部门经理审核中，请稍候。。');
493 console.log(leaveRequestModel.user + '申请从'
494 + leaveRequestModel.beginDate + '开始请假'
495 + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');
496
497 var answer = window.prompt('1为同意，2为不同意');
498 var result = answer == 1 ? '同意' : '不同意';
499 leaveRequestModel.result = '部门经理审核结果：' + result;
500
501 return auditOverState;
502 }
503
504 function auditOverState(request) {
505 var leaveRequestModel = request.businessVO;
506 // do sth
507 console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);
508 }
509
510 var lrm = new LeaveRequestModel();
511 lrm.user = '小林';
512 lrm.beginDate = '2014-4-2';
513 lrm.leaveDays = 5;
514
515 var request = new LeaveRequestContext2();
516 request.businessVO = lrm;
517 request.state = projectManagerState;
518
519 request.doWork();
520
521 }());
522
523 /*
524 何时选用状态模式
525 1.如果一个对象的行为取决于它的状态，而且它必须在运行时刻根据状态来改变它的行为，可以使用状态模式把状态和行为分离。
526 2.如果一个操作中含有庞大的多分支语句，而且这些分支依赖于该对象的状态，可以使用状态模式，把各个分支的处理分散包装到单独的对象处理类中。
527
528
529 相关模式
530
531 状态模式和策略模式
532 两个结构相同。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。
533
534 状态模式和观察者模式
535 相似但又有区别，可以组合使用。
536 这两个模式都是在状态发生改变的时候触发行为，只不过观察者模式的行为是固定的，那就是通知所有观察者；而状态模式是根据状态来选择不同的处理。
537 从表面来看，两个模式相似，观察者模式中的被观察对象就好比状态模式中的上下文，观察者模式中当被观察对象的状态发生改变的时候，触发的通知所有观察者的方法就好比状态模式中，根据状态的变化选择对应的状态处理。
538 但实际这两个模式是不同的，观察者模式的目的是在被观察者的状态发生改变的时候，触发观察联动，具体如何处理观察者模式不管；而状态模式的主要目的在于根据状态来分离和选择行为，当状态发生改变的时候，动态地改变行为。
539 这两个模式可以组合使用，比如在观察者模式的观察者部分，当被观察对象的状态发生改变，触发通知了所有的观察者后，使用状态模式根据通知过来的状态选择相应的处理。
540
541 状态模式和单例模式
542 可以组合使用
543 把状态模式中的状态处理类实现成单例。
544
545 状态模式和享元模式
546 可以组合使用
547 由于状态模式把状态对应的行为分散到多个状态对象中，会造成很多细粒度的状态对象，可以把这些状态处理对象通过享元模式来共享，从而节省资源。
548 */
549
550 (function () {
551 // http://www.dofactory.com/javascript-state-pattern.aspx
552 var TrafficLight = function () {
553
554 var count = 0;
555 var currentState = new Red(this);
556
557 this.change = function (state) {
558 // limits number of changes
559 if (count++ >= 10) return;
560
561 currentState = state;
562 currentState.go();
563 };
564
565 this.start = function () {
566 currentState.go();
567 };
568 }
569
570 var Red = function (light) {
571 this.light = light;
572
573 this.go = function () {
574 log.add("Red --> for 1 minute");
575 light.change(new Green(light));
576 }
577 };
578
579 var Yellow = function (light) {
580 this.light = light;
581
582 this.go = function () {
583 log.add("Yellow --> for 10 seconds");
584 light.change(new Red(light));
585 }
586 };
587
588 var Green = function (light) {
589 this.light = light;
590
591 this.go = function () {
592 log.add("Green --> for 1 minute");
593 light.change(new Yellow(light));
594 }
595 };
596
597 // log helper
598
599 var log = (function () {
600 var log = "";
601 return {
602 add: function (msg) { log += msg + "\n"; },
603 show: function () {
604 alert(log);
605 log = "";
606 }
607 }
608 })();
609
610 function run() {
611
612 var light = new TrafficLight();
613 light.start();
614
615 log.show();
616 }
617 }());
618 </script>
619 </body>
620 </html>
