javascriptDesignPatterns/State.html at master · LukeLin/javascriptDesignPatterns · GitHub

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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>State Pattern</title>
</head>
<body>

<script>
/**
 * 状态模式
 *
 * 定义：
 * 允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
 *
 * 本质：
 * 根据状态来分离和选择行为
 *
 * 1.状态和行为
 * 所谓对象的状态，通常指的就是对象实例的属性的值；而行为指的就是对象的功能，再具体点，行为大多可以对应到方法上。
 * 状态模式的功能就是分离状态和行为，通过维护状态的变化，来调用不同状态的的不同功能。
 * 也就是说，状态和行为是相关联的，它们的关系可以描述为：状态决定行为。
 *
 * 2.行为的平行性
 * 平行性指的是各个状态的行为所处的层次是一样的，相互是独立的，没有关联的，是根据不同的状态来决定到底走平行线哪一条。行为是不用的，当然对应的实现也是不同的，相互之间是不可替换的。
 * 平等性强调的是可替换性，大家是同一行为的不同描述或实现，因此在同一个行为发生的时候，可以根据条件挑选任意的一个实现来进行相应的处理。
 * 状态模式和策略模式的结构完全一样。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。
 *
 * 3.上下文和状态处理对象
 * 在状态模式中，上下文是持有状态的对象，但是上下文自身并不处理跟状态相关的行为，而是把处理状态的功能委托给了状态对应的状态处理类来处理。
 * 在具体的状态处理类中经常需要获取上下文自身的数据，甚至在必要的时候会回调上下文的方法，因此，通常将上下文自身当作一个参数传递给具体的状态处理类。
 * 客户端一般只和上下文交互。客户端可以用状态对象来配置一个上下文，一旦配置完毕，就不需要再和状态对象打交道了。
 *
 * 4.不完美的OCP体验
 * 由于状态的维护和转换在状态模式结构里面，不管你是扩展了状态实现类，还是新添加了状态实现类，都需要修改状态维护和转换的地方。
 *
 * 5.创建和销毁状态对象
 * 究竟何时创建和销毁状态对象？
 * 1）当需要使用状态对象的时候创建，使用完后销毁它们
 * 2）提前创建它们并始终不销毁。
 * 3）采用延迟加载和缓存合用的方式，就是当第一次需要使用状态对象的时候创建，使用完后并不销毁对象，而是把这个对象缓存起来，等待下一次使用，而且在合适的时候，会有缓存框剪销毁状态对象。
 * 如果状态在运行时是不可知的，而且上下文比较稳定，建议选择1.
 * 如果状态改变很频繁，而且状态对象还存储着大量的数据信息，建议选择2.
 * 如果无法确定状态改变是否频繁，而且有些状态对象的状态数据量大，有些较小，建议选择3.
 *
 * 6.状态模式的调用顺序
 * 在Context中进行状态的维护和转换：
 * 1）调用上下文的方法来处理业务请求。
 * 2）判断并维护状态。
 * 3）根据状态来调用相应的状态处理对象的方法。
 *
 * 状态的维护和转换控制
 * 所谓状态的维护，指的是维护状态的数据，给状态设置不用的状态值；而状态的转换，指的是根据状态的变化来选择不用的状态处理对象。在状态模式中，通常有两个地方可以进行状态的维护和转换控制。
 * 一个就是在上下文中。因为状态本身通常被实现为上下文对象的状态，因此可以在上下文中进行状态维护，当然也就可以控制状态的转换了。
 * 另外一个地方就是在状态的处理类中。当每个状态处理对象处理完自身状态所对应的功能后，可以根据需要指定后继状态，以便让应用能正确处理后继的请求。
 *
 * 采用让状态对象来维护和转换状态的调用顺序
 * 1）调用上下文的方法来处理业务请求。
 * 2）获取State对象。
 * 3）委托让相应的状态对象去处理。
 * 4）调用构造方法得到下一个状态对象的实例。
 * 5）设置下一个状态处理对象。
 * 6）再到5），直到结束。
 *
 * 如何选择这两种方式？
 * 1.如果状态转换的规则是一定的，一般不需要进行什么扩展规则，那么就适合在上下文中统一进行状态的维护。
 * 2.如果状态的转换取决于前一个状态动态处理的结果，或者是依赖于外部数据，为了增强灵活性，这种情况下，一般是在状态处理类中进行状态的维护。
 *
 * 还可以使用数据库来维护状态
 *
 */

(function () {
    // 示例代码

    // 实现一个与Context的一个特定状态相关的行为
    function ConcreteStateA() {}

    ConcreteStateA.prototype.handle = function () {};

    function ConcreteStateB() {}

    ConcreteStateB.prototype.handle = function () {};

    // 定义客户感兴趣的接口，通常会维护一个State的对象实例
    function Context(state) {
        this.state = state;
    }

    Context.prototype = {
        request: function (param) {
            this.state.handle(param);
        }
    };
}());

(function () {
    // 示例

    // 正常投票状态类
    function NormalVoteState() {}

    NormalVoteState.prototype.vote = function (user, voteItem, voteManager) {
        voteManager.mapVote[user] = voteItem;
    };

    // 重复投票状态类
    function RepeatVoteState() {}

    RepeatVoteState.prototype.vote = function (user, voteItem, voteManager) {
        console.log('请不要重复投票');
    };

    // 恶意投票状态类
    function SpliteVoteState() {}

    SpliteVoteState.prototype.vote = function (user, coteItem, voteManager) {
        var s = voteManager.mapVote[user];
        if (s) {
            delete voteManager.mapVote[user];
        }

        console.log('你有恶意刷票行为，取消投票资格');
    };

    // 黑名单状态类
    function BlackVoteState() {}

    BlackVoteState.prototype.vote = function (user, voteItem, voteManager) {
        console.log('进入黑名单，将禁止登录和使用本系统');
    };

    // 投票管理
    function VoteManager() {
        // 持有状态处理对象
        this.state = null;
        // 记录用户投票结果 <用户名称， 投票的选项>
        this.mapVote = {};
        // 记录用户投票次数 <用户名称， 投票次数>
        this.mapVoteCount = {};
    }

    VoteManager.prototype = {
        vote: function (user, voteItem) {
            var oldVoteCount = this.mapVoteCount[user] || 0;

            this.mapVoteCount[user] = ++oldVoteCount;

            if (oldVoteCount == 1) {
                this.state = new NormalVoteState();
            } else if (oldVoteCount > 1 && oldVoteCount < 5) {
                this.state = new RepeatVoteState();
            } else if (oldVoteCount >= 5 && oldVoteCount < 8) {
                this.state = new SpliteVoteState();
            } else if (oldVoteCount >= 8) {
                this.state = new BlackVoteState();
            }

            this.state.vote(user, voteItem, this);
        }
    };

    var vm = new VoteManager();
    for (var i = 0; i < 8; i++) {
        vm.vote('u1', 'A');
    }


    // another
    var States = {
        normal: function (user, voteItem, voteManager) {
            voteManager.mapVote[user] = voteItem;
        },
        repeat: function (user, voteItem, voteManager) {
            console.log('请不要重复投票');
        },
        splite: function (user, coteItem, voteManager) {
            var s = voteManager.mapVote[user];
            if (s != null) {
                delete voteManager.mapVote[user];
            }

            console.log('你有恶意刷票行为，取消投票资格');
        },
        black: function (user, voteItem, voteManager) {
            console.log('进入黑名单，将禁止登录和使用本系统');
        }
    };

    function VoteManager2() {
        this.state = null;
        this.mapVote = {};
        this.mapVoteCount = {};
    }

    VoteManager2.prototype = {
        vote: function (user, voteItem) {
            var oldVoteCount = this.mapVoteCount[user] || 0;

            this.mapVoteCount[user] = ++oldVoteCount;

            var state;
            if (oldVoteCount == 1) {
                state = 'normal';
            } else if (oldVoteCount > 1 && oldVoteCount < 5) {
                state = 'repeat';
            } else if (oldVoteCount >= 5 && oldVoteCount < 8) {
                state = 'splite';
            } else if (oldVoteCount >= 8) {
                state = 'black';
            }

            this.state = States[state];

            this.state(user, voteItem, this);
        }
    };

    var vm = new VoteManager2();
    for (var i = 0; i < 8; i++) {
        vm.vote('u1', 'A');
    }
}());

(function () {
    // 在状态处理类中进行后继状态的维护和转换

    function NormalVoteState() {
        this.vote = function (user, voteItem, voteManager) {
            voteManager.mapVote[user] = voteItem;
            console.log('恭喜你投票成功');
            // 正常投票完毕，维护下一个状态，同一个人再投票就重复了
            voteManager.mapState[user] = new RepeatVoteState();
        };
    }

    function RepeatVoteState() {
        this.vote = function (user, voteItem, voteManager) {
            console.log('请不要重复投票');
            if (voteManager.mapVoteCount[user] >= 4) {
                voteManager.mapState[user] = new SpliteVoteState();
            }
        };
    }

    function SpliteVoteState() {
        this.vote = function (user, voteItem, voteManager) {
            var s = voteManager.mapVote[user];

            if (s != null) {
                delete voteManager.mapVote[user];
            }

            console.log('你有恶意刷票行为，取消投票资格');

            if (voteManager.mapVoteCount[user] >= 7) {
                voteManager.mapState[user] = new BlackVoteState();
            }
        };
    }

    function BlackVoteState() {
        this.vote = function (user, voteItem, voteManager) {
            console.log('进入黑名单，将禁止登录和使用本系统');
        };
    }

    function VoteManager() {
        this.mapState = {};
        this.mapVote = {};
        this.mapVoteCount = {};

        this.vote = function (user, voteItem) {
            var oldVoteCount = this.mapVoteCount[user];

            if (oldVoteCount == null) {
                oldVoteCount = 0;
            }
            this.mapVoteCount[user] = ++oldVoteCount;

            var state = this.mapState[user];
            if (state == null) {
                state = new NormalVoteState();
            }

            state.vote(user, voteItem, this);
        };
    }


    var vm = new VoteManager();
    for (var i = 0; i < 8; i++) {
        vm.vote('u1', 'A');
    }

}());

(function () {
    // 模拟工作流
    /*
    请假流程，需项目经理和部门经理审批
     */

    // 公共状态处理机
    function LeaveRequestContext() {
        // 持有一个状态对象
        this.state = null;
        // 包含流程处理需要的业务数据对象
        this.businessVO = null;
    }

    LeaveRequestContext.prototype = {
        // 执行工作
        doWork: function () {
            this.state.doWork(this);
        }
    };

    // 定义请假单的业务数据模型
    function LeaveRequestModel() {
        // 请假人
        this.user = '';
        // 请假开始时间
        this.beginDate = '';
        // 请假天数
        this.leaveDays = '';
        // 审核结果
        this.result = '';
    }

    function ProjectManagerState() {
        this.doWork = function (request) {
            var leaveRequestModel = request.businessVO;

            console.log('项目经理审核中，请稍候。。');
            console.log(leaveRequestModel.user + '申请从'
                + leaveRequestModel.beginDate + '开始请假'
                + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

            var answer = window.prompt('1为同意，2为不同意');
            var result = answer == 1 ? '同意' : '不同意';
            leaveRequestModel.result = '项目经理审核结果：' + result;

            if (answer == 1) {
                if (leaveRequestModel.leaveDays > 3) {
                    request.state = new DepManagerState();
                } else {
                    request.state = new AuditOverState();
                }
            } else {
                request.state = new AuditOverState();
            }

            request.doWork();
        };
    }

    function DepManagerState() {
        this.doWork = function (request) {
            var leaveRequestModel = request.businessVO;

            console.log('部门经理审核中，请稍候。。');
            console.log(leaveRequestModel.user + '申请从'
                + leaveRequestModel.beginDate + '开始请假'
                + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

            var answer = window.prompt('1为同意，2为不同意');
            var result = answer == 1 ? '同意' : '不同意';
            leaveRequestModel.result = '部门经理审核结果：' + result;

            request.state = new AuditOverState();

            request.doWork();
        };
    }

    function AuditOverState() {
        this.doWork = function (request) {
            var leaveRequestModel = request.businessVO;
            // do sth
            console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);
        };
    }

    var lrm = new LeaveRequestModel();
    lrm.user = '小林';
    lrm.beginDate = '2014-4-2';
    lrm.leaveDays = 5;

    var request = new LeaveRequestContext();
    request.businessVO = lrm;
    request.state = new ProjectManagerState();

    request.doWork();


    // another

    function LeaveRequestContext2() {
        this.state = null;
        // 包含流程处理需要的业务数据对象
        this.businessVO = null;
        this.doWork = function () {
            if (typeof this.state == 'function') {
                this.state = this.state(this);
                this.doWork();
            }
        };
    }

    function projectManagerState(request) {
        var leaveRequestModel = request.businessVO;

        console.log('项目经理审核中，请稍候。。');
        console.log(leaveRequestModel.user + '申请从'
            + leaveRequestModel.beginDate + '开始请假'
            + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

        var answer = window.prompt('1为同意，2为不同意');
        var result = answer == 1 ? '同意' : '不同意';
        leaveRequestModel.result = '项目经理审核结果：' + result;

        var state;
        if (answer == 1) {
            if (leaveRequestModel.leaveDays > 3) {
                state = depManagerState;
            } else {
                state = auditOverState;
            }
        } else {
            state = auditOverState;
        }

        return state;
    }

    function depManagerState(request) {
        var leaveRequestModel = request.businessVO;

        console.log('部门经理审核中，请稍候。。');
        console.log(leaveRequestModel.user + '申请从'
            + leaveRequestModel.beginDate + '开始请假'
            + leaveRequestModel.leaveDays + '天，请项目经理审核（1为同意，2为不同意）');

        var answer = window.prompt('1为同意，2为不同意');
        var result = answer == 1 ? '同意' : '不同意';
        leaveRequestModel.result = '部门经理审核结果：' + result;

        return auditOverState;
    }

    function auditOverState(request) {
        var leaveRequestModel = request.businessVO;
        // do sth
        console.log(leaveRequestModel.user + '，你的请假申请已经审核结束，结果是：' + leaveRequestModel.result);
    }

    var lrm = new LeaveRequestModel();
    lrm.user = '小林';
    lrm.beginDate = '2014-4-2';
    lrm.leaveDays = 5;

    var request = new LeaveRequestContext2();
    request.businessVO = lrm;
    request.state = projectManagerState;

    request.doWork();

}());

/*
何时选用状态模式
1.如果一个对象的行为取决于它的状态，而且它必须在运行时刻根据状态来改变它的行为，可以使用状态模式把状态和行为分离。
2.如果一个操作中含有庞大的多分支语句，而且这些分支依赖于该对象的状态，可以使用状态模式，把各个分支的处理分散包装到单独的对象处理类中。


相关模式

状态模式和策略模式
两个结构相同。状态模式的行为是平行性的，不可相互替换的；而策略模式的行为是平等性的，可相互替换的。

状态模式和观察者模式
相似但又有区别，可以组合使用。
这两个模式都是在状态发生改变的时候触发行为，只不过观察者模式的行为是固定的，那就是通知所有观察者；而状态模式是根据状态来选择不同的处理。
从表面来看，两个模式相似，观察者模式中的被观察对象就好比状态模式中的上下文，观察者模式中当被观察对象的状态发生改变的时候，触发的通知所有观察者的方法就好比状态模式中，根据状态的变化选择对应的状态处理。
但实际这两个模式是不同的，观察者模式的目的是在被观察者的状态发生改变的时候，触发观察联动，具体如何处理观察者模式不管；而状态模式的主要目的在于根据状态来分离和选择行为，当状态发生改变的时候，动态地改变行为。
这两个模式可以组合使用，比如在观察者模式的观察者部分，当被观察对象的状态发生改变，触发通知了所有的观察者后，使用状态模式根据通知过来的状态选择相应的处理。

状态模式和单例模式
可以组合使用
把状态模式中的状态处理类实现成单例。

状态模式和享元模式
可以组合使用
由于状态模式把状态对应的行为分散到多个状态对象中，会造成很多细粒度的状态对象，可以把这些状态处理对象通过享元模式来共享，从而节省资源。
 */

(function () {
    // http://www.dofactory.com/javascript-state-pattern.aspx
    var TrafficLight = function () {

        var count = 0;
        var currentState = new Red(this);

        this.change = function (state) {
            // limits number of changes
            if (count++ >= 10) return;

            currentState = state;
            currentState.go();
        };

        this.start = function () {
            currentState.go();
        };
    }

    var Red = function (light) {
        this.light = light;

        this.go = function () {
            log.add("Red --> for 1 minute");
            light.change(new Green(light));
        }
    };

    var Yellow = function (light) {
        this.light = light;

        this.go = function () {
            log.add("Yellow --> for 10 seconds");
            light.change(new Red(light));
        }
    };

    var Green = function (light) {
        this.light = light;

        this.go = function () {
            log.add("Green --> for 1 minute");
            light.change(new Yellow(light));
        }
    };

    // log helper

    var log = (function () {
        var log = "";
        return {
            add: function (msg) { log += msg + "\n"; },
            show: function () {
                alert(log);
                log = "";
            }
        }
    })();

    function run() {

        var light = new TrafficLight();
        light.start();

        log.show();
    }
}());
</script>
</body>
</html>