Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1249ed0

Browse files
✨ feat: 添加命令模式
1 parent c5c7d1c commit 1249ed0

File tree

3 files changed

+234
-0
lines changed

3 files changed

+234
-0
lines changed

‎Command/Command.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>命令模式</title>
8+
</head>
9+
<body>
10+
<div>
11+
<button id="btn1">Button1</button>
12+
<button id="btn2">Button2</button>
13+
<button id="btn3">Button3</button>
14+
</div>
15+
<script src="./Command.js"></script>
16+
</body>
17+
</html>

‎Command/Command.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
let btn1 = document.getElementById('btn1')
2+
let btn2 = document.getElementById('btn2')
3+
let btn3 = document.getElementById('btn3')
4+
5+
// 命令发布者类
6+
class Executor {
7+
setCommand(btn, command) {
8+
btn.onclick = function () {
9+
command.execute()
10+
}
11+
}
12+
}
13+
// 定义一个命令接受者
14+
class Menu {
15+
refresh() {
16+
console.log('刷新菜单')
17+
}
18+
19+
addSubMenu() {
20+
console.log('增加子菜单')
21+
}
22+
23+
deleteMenu() {
24+
console.log('删除菜单')
25+
}
26+
}
27+
28+
// 定义一个刷新菜单对象的类
29+
class RefreshMenu {
30+
constructor(receiver) {
31+
// 使命令对象与接受者关联
32+
this.receiver = receiver
33+
}
34+
// 暴露出统一接口给 Excetor
35+
execute() {
36+
this.receiver.refresh()
37+
}
38+
}
39+
40+
// 定义一个接受子菜单的命令对象的类
41+
class AddSubMenu {
42+
constructor(receiver) {
43+
// 使命令对象与接受者关联
44+
this.receiver = receiver
45+
}
46+
47+
// 暴露出统一的接口给 Excetor
48+
execute() {
49+
this.receiver.addSubMenu()
50+
}
51+
}
52+
53+
// 定义一个接受删除菜单对象的类
54+
class DeleteMenu {
55+
constructor(receiver) {
56+
this.receiver = receiver
57+
}
58+
59+
// 暴露出统一的接口给 Excetor
60+
execute() {
61+
this.receiver.deleteMenu()
62+
}
63+
}
64+
65+
66+
let menu = new Menu()
67+
let executor = new Executor()
68+
69+
let refreshMenu = new RefreshMenu(menu)
70+
71+
// 给 按钮1 添加刷新功能
72+
executor.setCommand(btn1, refreshMenu)
73+
74+
let addSubMenu = new AddSubMenu(menu)
75+
// 给按钮2添加子菜单功能
76+
executor.setCommand(btn2, addSubMenu)
77+
78+
let deleteMenu = new DeleteMenu(menu)
79+
// 给按钮3添加删除功能
80+
executor.setCommand(btn3, deleteMenu)
81+

‎Command/Command.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# 命令模式
2+
3+
> 在软件系统里,`行为请求者`与`行为实现者`通常呈现一种*紧耦合*,但在某些场合,比如要对行为进行`记录、撤销/重做、事务`等处理时,这种无法抵御变化的紧耦合是不合适的。在这种情况下,如果要将`行为请求者`与`行为实现者`解耦合,我们需要将一组行为抽象为对象,实现二者之间的松耦合,这就是`命令模式`。
4+
5+
我们需要在命令的发布者和接受者之间定义一个命令对象,命令对象会暴露一个统一的借口给命令的发布者而命令的发布者不需要去了解接受者是如何执行命令的,做到了命令发布者和接受者的解耦合。
6+
7+
[![u06DRP.png](https://s2.ax1x.com/2019/10/03/u06DRP.png)](https://imgchr.com/i/u06DRP)
8+
9+
我们下面的例子中一个页面有三个按钮,每个按钮有不同的功能:
10+
11+
```html
12+
<!DOCTYPE html>
13+
<html lang="en">
14+
<head>
15+
<meta charset="UTF-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
18+
<title>命令模式</title>
19+
</head>
20+
<body>
21+
<div>
22+
<button id="btn1">Button1</button>
23+
<button id="btn2">Button2</button>
24+
<button id="btn3">Button3/button>
25+
</div>
26+
<script src="./Command.js"></script>
27+
</body>
28+
</html>
29+
```
30+
31+
接下来我们定义一个命令发布者(执行者)的类
32+
33+
```javascript
34+
class Executor {
35+
setCommand(btn, command) {
36+
btn.onclick = function () {
37+
command.execute();
38+
}
39+
}
40+
}
41+
```
42+
43+
接着我们定义一个命令接受者,此例中为一个菜单
44+
45+
```javascript
46+
// 定义一个命令接受者
47+
class Menu {
48+
refresh() {
49+
console.log('刷新菜单')
50+
}
51+
52+
addSubMenu() {
53+
console.log('增加子菜单')
54+
}
55+
56+
deleteMenu() {
57+
console.log('删除菜单')
58+
}
59+
}
60+
```
61+
62+
之后我们将Menu的方法执行封装在单独的类中
63+
64+
```js
65+
66+
class RefreshMenu {
67+
constructor(receiver) {
68+
// 使命令对象与接受者关联
69+
this.receiver = receiver
70+
}
71+
// 暴露出统一接口给 Excetor
72+
execute() {
73+
this.receiver.refresh()
74+
}
75+
}
76+
77+
// 定义一个接受子菜单的命令对象的类
78+
class AddSubMenu {
79+
constructor(receiver) {
80+
// 使命令对象与接受者关联
81+
this.receiver = receiver
82+
}
83+
84+
// 暴露出统一的接口给 Excetor
85+
execute() {
86+
this.receiver.addSubMenu()
87+
}
88+
}
89+
90+
// 定义一个接受删除菜单对象的类
91+
class DeleteMenu {
92+
constructor(receiver) {
93+
this.receiver = receiver
94+
}
95+
96+
// 暴露出统一的接口给 Excetor
97+
execute() {
98+
this.receiver.deleteMenu()
99+
}
100+
}
101+
102+
```
103+
104+
之后我们分别实例华不同的对象
105+
106+
```javascript
107+
// 首先获取按钮对象
108+
let btn1 = document.getElementById('btn1')
109+
let btn2 = document.getElementById('btn2')
110+
let btn3 = document.getElementById('btn3')
111+
112+
let menu = new Menu()
113+
let executor = new Executor()
114+
115+
let refreshMenu = new RefreshMenu(menu)
116+
117+
// 给 按钮1 添加刷新功能
118+
executor.setCommand(btn1, refreshMenu) // 点击按钮1 显示"刷新菜单"
119+
120+
let addSubMenu = new AddSubMenu(menu)
121+
// 给按钮2添加子菜单功能
122+
executor.setCommand(btn2, addSubMenu)// 点击按钮2 显示"添加子菜单"
123+
124+
let deleteMenu = new DeleteMenu(menu)
125+
// 给按钮3添加删除功能
126+
executor.setCommand(btn3, deleteMenu)// 点击按钮3 显示"删除菜单"
127+
128+
```
129+
130+
131+
132+
#### 总结
133+
134+
- 发布者与接受者实现了解耦合,符合单一职责原则。
135+
- 命令可扩展,对请求可以进行排队或日志记录,符合开放—封闭原则。
136+
- 但额外增加了命令对象,存在一定的多余开销。

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /