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 实际操作]九、实用进阶-(18)图像人脸识别：对图片中的人像进行面部检测
目录:[Swift]Xcode实际操作 本文将演示对图片中的人像,进行面部检测. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //导入 ...
- Java 工程师面试题和笔试题整理（一）
根据自己之前收集的还有一部分自己面试的整理出来,希望能帮到面试的兄弟(2017). 海科融通 笔试题 1.有一个字符串,如果要在其中查找一个子串,都有哪些方式,写出你认为最好的一个. 2.写出线程都有 ...
- day04 基本类型包装类
- 学习java设计模式的必要性探讨
1.设计模式是什么:设计模式为我们提供了一套可复用的面向对象技术,再配合重构方法,可以让我们避免简单重复的工作.它使用面向接口编程,而不是面向实现.可以说设计模式是java程序设计的灵魂. 2.为什么 ...
- 最大xor,and,or
http://210.33.19.103/contest/998 and,or部分 并不用01trie,题目&题解:https://blog.csdn.net/dreaming__ldx/ar ...
- 解决 mac zsh 所有命令失效
上面的没啥用, 直接看分割线吧, 上面的是第一次遇到这个问题, 没有解决.. zsh: command not found: 参考: https://www.jiloc.com/43492.html ...
- 543 Diameter of Binary Tree 二叉树的直径
给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点.示例 :给定二叉树 1 / \ 2 ...
- JAVA 时间的使用
今天老师又没有讲新课,不过讲了练习题,扩展了一下我们的思维. 今天就讲一下如何获取时间吧. 代码: import java.util.* public class Test{ public stati ...
- Azure资源管理工具Azure PowerShell介绍
什么是 Azure PowerShell? Azure PowerShell 是一组模块,提供用于通过 Windows PowerShell 管理 Azure 的 cmdlet.你可以使用 cmdle ...
- vue+element ui项目总结点（五）Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...