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),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...
随机推荐
- 2014-7-7 NOIP模拟赛（图论）
1.无线通讯网(wireless.pas/cpp/c) [题目描述] 国防部计划用无线网络连接若干个边防哨所.2种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配 ...
- uoj#268. 【清华集训2016】数据交互（动态dp+堆）
传送门 动态dp我好像还真没咋做过--通过一个上午的努力光荣的获得了所有AC的人里面的倒数rk3 首先有一个我一点也不觉得显然的定理,如果两条路径相交,那么一定有一条路径的\(LCA\)在另一条路径上 ...
- IT兄弟连 JavaWeb教程 EL与JSTL表达式经典案例
案例需求:使用MVC模式编写一个程序,当发起一个deptList.do请求时,在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中转发到deptlist.jsp,使用JST ...
- [題解]（DP）CF713C_Sonya and Problem Wihtout a Legend
對於不嚴格單調的我們可以n^2DP,首先每個數一定在原數組中出現過,如果沒出現過不如減小到出現過的那個花費更小,效果相同 所以f[i][j]表示把i改到離散化后j的最小代價,每次維護前一狀態最小值mn ...
- [題解]（單調隊列/水）luogu_P3088擠奶牛
d長度內區間最大值,單調隊列維護即可 由於需要滿足左右同時有2倍高度的牛才能更新答案,所以正反跑兩次 #include<bits/stdc++.h> using namespace std ...
- C#基础之析构函数
- bzoj 2441 [中山市选2011]小W的问题
bzoj 2441 [中山市选2011]小W的问题 Description 有一天,小W找了一个笛卡尔坐标系,并在上面选取了N个整点.他发现通过这些整点能够画出很多个"W"出来.具 ...
- NOIP前模拟赛总结
NOIP前模拟赛总结 from 2018.10.7 to ??? Date Name Score(Rank) Problems 2018.10.7 McfXH AK Contest 42(?) 期望得 ...
- rtos概要
一 RTOS如何调试: 静态调试帮不上忙,因为嵌入式系统都是动态系统 ,要借助基于RTOS系统的可视化分析 :Micriµm 的 µC/Probe ,SEGGER 的 SystemView ,Perc ...
- python学习之图形界面编程：
一 tkinter:tkinter是python自带的支持tk的库,python代码调用tkinter->tk->操作系统提供的本地GUI(TKL语言开发))完成界面开发,不需要安装任何第 ...