web前端全系列 教程
1839个小节阅读:2243.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
命令模式(Command)的定义是:⽤于将⼀个请求封装成⼀个对象,从⽽使你可⽤不同的请求对客户进⾏参数化;对请求排队或者记录请求⽇志,以及执⾏可撤销的操作。也就是说改模式旨在将函数的调⽤、请求和操作封装成⼀个单⼀的对象,然后对这个对象进⾏⼀系列的处理。此外,可以通过调⽤实现具体函数的对象来解耦命令对象与接收对象。
xxxxxxxxxx
641<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>cmd-demo</title>
6</head>
7<body>
8 <div>
9 <button id="btn1">按钮1</button>
10 <button id="btn2">按钮2</button>
11 </div>
12 <script>
13 var btn1 = document.getElementById('btn1')
14 var btn2 = document.getElementById('btn2')
15 // 定义⼀个命令发布者(执⾏者)的类
16 class Executor {
17 setCommand(btn, command) {
18 btn.onclick = function() {
19 command.execute()
20 }
21 }
22 }
23 // 定义⼀个命令接收者
24 class Menu {
25 refresh() {
26 console.log('刷新菜单')
27 }
28 addSubMenu() {
29 console.log('增加⼦菜单')
30 }
31 }
32 // 定义⼀个刷新菜单的命令对象的类
33 class RefreshMenu {
34 constructor(receiver) {
35 // 命令对象与接收者关联
36 this.receiver = receiver
37 }
38 // 暴露出统⼀的接⼝给命令发布者Executor
39 execute() {
40 this.receiver.refresh()
41 }
42 }
43 // 定义⼀个增加⼦菜单的命令对象的类
44 class AddSubMenu {
45 constructor(receiver) {
46 // 命令对象与接收者关联
47 this.receiver = receiver
48 }
49 // 暴露出统⼀的接⼝给命令发布者Executor
50 execute() {
51 this.receiver.addSubMenu()
52 }
53 }
54 var menu = new Menu()
55 var executor = new Executor()
56 var refreshMenu = new RefreshMenu(menu)
57 // 给按钮1添加刷新功能
58 executor.setCommand(btn1, refreshMenu)
59 var addSubMenu = new AddSubMenu(menu)
60 // 给按钮2添加增加⼦菜单功能
61 executor.setCommand(btn2, addSubMenu)
62 </script>
63</body>
64</html>