js的命令模式
命令模式：
什么叫命令模式：
将一个请求封装成一个对象，从而让你使用不同的请求把客户端参数化，对请求排队或者记录请求日志，可以提供命令的撤销和恢复功能。
命令模式主要有四个部分：
- 命令对象（command）：需要执行的命令都在此声明
- 委托者（client）：创建命令对象，并把它传递给调用者
- 调用者（invoker）：使用命令对象并调用它上面的方法
- 接受者（receiver）：实际干活的角色，命令传递到这里被实际执行
上代码来理解
<html>
<head></head>
<body>
<button id='but'>更新</button>
<button id='but1'>新增</button>
</body>
<script>
var button1 = document.getElementById('but')
var button2 = document.getElementById('but1')
// 封装方法
var bindClick = function(button, func) {
button.onclick = func;
};
// 一方法
var MenuBar = {
refresh: function() {
console.log('refresh');
},
};
// 二方法
var SubMenu = {
add: function() {
console.log('add');
},
del: function() {
console.log('del');
},
};
// 运行
bindClick(button1, MenuBar.refresh);
bindClick(button2, SubMenu.add);
</script>
</html>
宏命令：也可以叫做一个命令运行多个事件
<html>
<head></head>
<body>
<button id='but'>拉萨JFK撒</button>
<button id='but1'>拉萨JFK撒</button>
</body>
<script>
var button1 = document.getElementById('but')
var button2 = document.getElementById('but1')
//命令1
var closeDoorCommand = {
execute: function() {
console.log('close door');
},
};
//命令2
var openPcCommand = {
execute: function() {
console.log('open pc');
},
};
//命令3
var openQQCommand = {
execute: function() {
console.log('login qq');
},
};
//宏命令对象
var MacroCommand = function() {
return {
commandList: [],
add: function(command) {
this.commandList.push(command);
},
execute: function() {
for (var i = 0, command; command = this.commandList[i++];) {
command.execute();
}
},
};
};
//实例
var macroCommand = MacroCommand(); macroCommand.add(closeDoorCommand);
macroCommand.add(openPcCommand);
macroCommand.add(openQQCommand); macroCommand.execute();
</script>
</html>
具体类是对基于类的编程语言的最好解释,并且同抽象类的理念联系紧密.抽象类定义了一个接口,但并不需要提供对它的所有成员函数的实现.它扮演着驱动其它类的基类角色.被驱动类实现了缺失的函数而被称为具体类. 命令模式背后的一般理念是为我们提供了从任何执行中的命令中分离出发出命令的责任,取而代之将这一责任委托给其它的对象
用图来讲解下
就是这么简单
js的命令模式的更多相关文章
- js设计模式-命令模式
命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...
- 浅谈js设计模式 — 命令模式
命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...
- JS命令模式个人理解
JS命令模式个人理解 //BODY部分<body> <button id="execute">打开电视</button> <button ...
- 大熊君说说JS与设计模式之------命令模式Command
一,总体概要 1,笔者浅谈 日常生活中,我们在看电视的时候,通过遥控器选择我们喜欢的频道时,此时我们就是客户端的角色,遥控器的按钮相当于客户请求,而具体执行的对象就是命令对象, 命令模式把一个请求或者 ...
- js设计模式（11）---命令模式
0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...
- JS 设计模式五 -- 命令模式
概念 命令模式中的命令(command) 指的是 一个执行某些待定事情的指令. 用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 例子 假设html结构如下: &l ...
- js设计模式（六）---命令模式
命令模式算是最简单.优雅的模式之一了,命令模式中的命令指的是一个执行某些特定事情的指令.目的是吧请求发送者和请求接受者解耦, 就像点餐,顾客只需要发送菜单,谁去接收,不用考虑.厨师接收到命令开始做菜, ...
- JS设计模式（6）命令模式
什么是命令模式? 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需要对行为进行记录. ...
- js命令模式
命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...
随机推荐
- Optimized fragmentation improves the identification of peptides cross-linked by MS-cleavable reagents （文献分享一组-张宇星）
题目:Optimized fragmentation improves the identification of peptides cross-linked by MS-cleavable reag ...
- 上传到git
https://blog.csdn.net/Lucky_LXG/article/details/77849212
- 常用SQL语句写法（一）
<resultMap id="userResult" type="com.cloudwalk.shark.model.User"> <id p ...
- slice方法可以将“类似数组的对象”变成真正的数组 （遇到时候再研究一次）
典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串. // arguments对象 function args() { return arguments } ...
- Guard Duty (medium) Codeforces - 958E2 || (bzoj 2151||洛谷P1792) 种树 || 编译优化
https://codeforces.com/contest/958/problem/E2 首先求出N个时刻的N-1个间隔长度,问题就相当于在这些间隔中选K个数,相邻两个不能同时选,要求和最小 方法1 ...
- CVE-2012-0002（MS12-020）3389远程溢出漏洞
1:攻击机:Kali和windows皆可 2:目标机:windows XP系统(开启3389) Kali测试: search m12-020 搜索ms12-020 use auxiliary/dos/ ...
- 阿里云-域名免费申请ssl证书过程
1.运行证书服务docker docker run --entrypoint="/bin/sh" -it --name certbotsh certbot/certbot:late ...
- python入门之递归
表现形式: 函数体里包含执行本身 def f1(): r = f1() f1() 实例: 斐波那契数 (a1+a2=a3 a2+a3=a4 a3+a4=a5 ......) def f1( ...
- php中socket的使用（重点参考）
一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...
- mysql写存储过程并定时调用
设置一个定时任务:运行以下SQL -- 创建一个表test:字段endtime CREATE TABLE test (endtime DATETIME); -- 创建函数 :向test插入endt ...