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),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...
随机推荐
- [Xcode 实际操作]一、博主领进门-(4)设置项目的属性
目录:[Swift]Xcode实际操作 本文将演示如何设置项目的属性. 点击项目名称[DemoApp],打开项目信息面板. [Identity识别]设置区域 [Display Name]:DemoAp ...
- 后Selenium时代，网页自动化测试用Cypress
本文技术难度★★★,初学自动化测试的朋友慎点!否则会引起焦虑等不适症状,严重者会怀疑自己技术人生! 来自Cypress官网首页! Web开发飞速换代! table控制页面OUT了! 原生态手写网页OU ...
- Suse 11 sp4 安装Oracle 11g
环境信息 suse 11 sp4 64位 企业版配置:虚拟机,1U4CORE,4GB内存,100GB存储(实际可用空间20GB) linux环境配置修改 在安装oracle之前,需要先对linux 的 ...
- [题解]（组合数/二位前缀和）luogu_P2822组合数问题
首先要知道C(n,m)=C(n-1,m)+C(n-1,m-1),这样显然是一个杨辉三角,这样大部分的问题就解决了, 那么判能否整除只需要杨辉三角对k取模即可, 而对于多组数据的k都是一样的,所以用前缀 ...
- Tinghua Data Mining 7
SVM B分割得更加无偏 比较公平 卡着分界面的点叫支持向量,就好比托着分界面 支持向量决定了可移动的范围,这个范围就叫margin 分界面可移动的距离 前提是先要被分对 对偶问题一般是不等价的,但是 ...
- [在读]JavaScript异步编程：设计快速响应的网络应用
很棒的一本,就如书名所示,主要讲js异步的一些东西,比如定时器.Jquery的promise和deffered,node...看了一小半.推荐哦~~
- @RequestParam和@ResponseBody注解的区别（转）
@RequestParam 用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容.(Http协议中,如果不指定Content-Type, ...
- 关于React的赋值与调用方法
#关于React的赋值与调用方法 比如调用方法的时候我们可以这样来使用closeFrm() <div className = "infoFrm_close" onMouseO ...
- css选择器（基础）
CSS选择器: 一个样式的语法是由选择器+属性+属性值三部分组成: 到底什么是选择器呢? 答:个人直白的理解为:选择一种要对它进行操作的标签的方法就叫做选择器.也就是说选择器就是一种选择元素的 ...
- ajax报错问题的解决
背景:用ajax与服务器页面进行交互 问题:XMLHttpRequest.status==0并且XMLHttpRequest.readyState==0并且textStatus==error 关于XM ...