命令模式：

什么叫命令模式：

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

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

  • 命令对象（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. [Xcode 实际操作]九、实用进阶-(20)创建位移关键帧动画：通过添加运动关键点制作位移动画

    目录:[Swift]Xcode实际操作 本文将演示如何通过添加运动关键点的方式,来制作位移动画 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIK ...

  2. Maven私服搭建(Nexus Repository Manager 3)

    下载和安装 下载地址:https://help.sonatype.com/repomanager3/download 注意:Nexus Repository Manager 3是一个Java服务器应用 ...

  3. 几例实用的Shell脚本

    日常工作中,经常编写一些shell命令或脚本以完成重复性操作,本文分享了最近用到的几例shell实用脚本. 1 特殊文件名的远程拷贝 服务器之间拷贝文件经常使用scp命令,其命令格式: (1)scp ...

  4. [筆記]catalan卡特蘭數

    前言:希望自己每個星期能發一篇文章,提升一下寫文章的能力?雖然對語文作文毫無幫助但是總比玩遊戲強 所以不務正業的東西就不放在首頁了,有興趣的可以點分類去看 來源:https://www.cnblogs ...

  5. 【bzoj1123】BLO

    1123: [POI2008]BLO Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2222  Solved: 1090[Submit][Status ...

  6. 使用nvmw解决windows下多版本node共存的问题

    不支持4.x的nodejs,用nodist吧 不支持4.x的nodejs,用nodist吧 不支持4.x的nodejs,用nodist吧 ===========不要再看的分割线============ ...

  7. js去掉字符串前后以及中间的空格

    p['bank_card'] = p['bank_card'].replace(/(^\s+)|(\s+$)/g,"");p['bank_card'] = p['bank_card ...

  8. 使用SSL配置Nginx反向代理的简单指南

    反向代理是一个服务器,它接收通过Web发出的请求,即http和https,然后将它们发送到后端服务器(或服务器).后端服务器可以是单个或一组应用服务器,如Tomcat,wildfly或Jenkins等 ...

  9. python flask学习(1)与Git基础操作

    今天从简单的flask开始完成Flask web开发的学习.今天学习了Git和GitHub项目的提交. Git尝试提交过程中出现了"Could not read from remote re ...

  10. h5旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...