-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path18-状态模式.html
104 lines (98 loc) · 2.8 KB
/
18-状态模式.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>18-状态模式</title>
</head>
<body>
<p>
<span class="title">
状态模式：当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象。
</span>
<br>
<br>
<span class="advantage">好处：</span>
<ul>
<li class="advantage_desc">
可以减少代码中的条件判断语句，并且使每种判断情况独立存在，这样更方便管理，也可以进行组合。
</li>
<li class="advantage_desc">
解决条件分支之间的耦合问题。
</li>
</ul>
</p>
<script>
// 创建超级玛丽状态类
const MarryState = function () {
// 内部状态私有变量
let _currentState = {};
// 动作与状态方法映射
const states = {
jump: function () {
// 跳跃
console.log('jump');
},
move: function () {
// 移动
console.log('move');
},
shoot: function () {
// 射击
console.log('shoot');
},
squat: function () {
// 下蹲
console.log('squat');
},
};
// 动作控制类
const Action = {
// 改变状态方法
changeState: function () {
// 组合动作通过传递多个参数实现
const args = arguments;
// 重置内部状态
_currentState = {};
// 如果有动作则添加动作
if (args.length) {
// 遍历动作
for (let i = 0, len = args.length; i < len; i++) {
// 向内部状态中添加动作
_currentState[args[i]] = true;
}
}
// 返回动作控制类
return this;
}
// 执行动作
, goes: function () {
console.log('触发一次动作');
// 遍历内部状态保存的动作
for (let i in _currentState) {
// 如果该动作存在则执行
states[i] && states[i]();
}
return this;
}
}
// 返回接口方法change、goes
return {
change: Action.changeState,
goes: Action.goes,
}
}
/************************************测试代码**************************************/
// 创建一个超级玛丽(实例化一下这个状态类，这样不会受到别人的影响)
const marry = new MarryState();
marry
.change('jump', 'shoot')
.goes()
.goes()
.change('shoot')
.goes();
</script>
</body>
</html>