命令模式：

什么叫命令模式：

将一个请求封装成一个对象，从而让你使用不同的请求把客户端参数化，对请求排队或者记录请求日志，可以提供命令的撤销和恢复功能。

命令模式主要有四个部分：

  • 命令对象（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的命令模式的更多相关文章

  1. js设计模式-命令模式

    命令模式是一种组织型模式,主要用在把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.也就是说 ,凡是两个对象间的互动方式需要更高的模块化程度时都可以用到这种模式. 命令模式的好处:1.提高 ...

  2. 浅谈js设计模式 — 命令模式

    命令模式最常见的应用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦 ...

  3. JS命令模式个人理解

    JS命令模式个人理解 //BODY部分<body> <button id="execute">打开电视</button> <button ...

  4. 大熊君说说JS与设计模式之------命令模式Command

    一,总体概要 1,笔者浅谈 日常生活中,我们在看电视的时候,通过遥控器选择我们喜欢的频道时,此时我们就是客户端的角色,遥控器的按钮相当于客户请求,而具体执行的对象就是命令对象, 命令模式把一个请求或者 ...

  5. js设计模式（11）---命令模式

    0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...

  6. JS 设计模式五 -- 命令模式

    概念 命令模式中的命令(command) 指的是 一个执行某些待定事情的指令. 用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 例子 假设html结构如下: &l ...

  7. js设计模式（六）---命令模式

    命令模式算是最简单.优雅的模式之一了,命令模式中的命令指的是一个执行某些特定事情的指令.目的是吧请求发送者和请求接受者解耦, 就像点餐,顾客只需要发送菜单,谁去接收,不用考虑.厨师接收到命令开始做菜, ...

  8. JS设计模式（6）命令模式

    什么是命令模式? 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需要对行为进行记录. ...

  9. js命令模式

    命令模式(Command),将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤销的操作. 从命令模式的结构图可以看出,它涉及到五个角色,它们分别是 ...

随机推荐

  1. 51nod1402(贪心)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1402 题意:中文题诶- 思路:贪心 对于一个桩点,如果我们只考 ...

  2. 【UVA - 156 】Ananagrams （set,map,vector）

    Ananagrams  Descriptions: Most crossword puzzle fans are used to anagrams--groups of words with the ...

  3. perl C/C++ 扩展（四）

    在前面三篇博客中,我们了解到如何使用c/c++ 扩展自己的perl 库,但是博主在学习过程中,对动态库或静态库的加载不是十分了解,后来自己又细挖一下.后来就有了这篇博文,再后来,没有再后来了,囧!! ...

  4. native-echarts 在安卓上无法显示出来

    1.native-echarts 的配置是百度echarts 2.模拟器上试了很多次都显示不出来(具体不清楚,我的是这样) 3.真机测试可以显示图表,以下是配置: a.将node_modules\na ...

  5. Serervlet | 两种跳转方式

    https://www.cnblogs.com/fanhc/archive/2012/09/21/2696343.html response.sendRedirect是向客户浏览器发送页面重定向指令, ...

  6. 112 Path Sum 路径总和

    给定一棵二叉树和一个总和,确定该树中是否存在根到叶的路径,这条路径的所有值相加等于给定的总和.例如:给定下面的二叉树和 总和 = 22,              5             / \  ...

  7. VMware下OSSIM 4.1.0的下载、安装和初步使用（图文详解）

    不多说,直接上干货! 为什么,我写了一篇OSSIM 5.2.0的,还要再来写OSSIM 4.1.0呢,是因为,OSSIM 5.2.0所需内存较大,8G甚至16G,但是,肯定性能和里面集成组件越高级.也 ...

  8. LINQ to Entities不支持Convert.ToDateTime方法解決一例

    錯誤提示: LINQ to Entities does not recognize the method 'System.DateTime ToDateTime(System.String)' met ...

  9. poj2135 最小费用流

    添加超级源点(与点1之间的边容量为2,权值为0)和超级汇点(与点N之间的边容量为2,权值为0),求流量为2的最小费用流.注意是双向边. #include <iostream> #inclu ...

  10. React Native 手工搭建环境 之iOS篇

    常识 React native 开发服务器 在开发时,我们的框架是这样的:  当正式发布进入到生产环境时,开发服务器上所有的js文件将会被编译成包的形式,直接嵌入到客户端内.这时,已经不再需要开发服 ...