js设计模式--命令模式

Bryan 发布于2019-08-23 14:29 / 2845人阅读

摘要：中的命令模式点击按钮刷新菜单目录设置背景色的例子撤销命令我们现在来实现一个撤销操作的例子界面上有四个按钮，三个可以设置不同的背景色，按钮可以撤销上一次的操作重做操作这里我们增加一个按钮，以恢复之前的操作，需要一个来记录当前的索引

前言

本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。

文章系列

js设计模式--单例模式

js设计模式--策略模式

js设计模式--代理模式

js设计模式--迭代器模式

js设计模式--发布订阅模式

概念

命令模式中的命令(command)指的是一个执行某些特定事情的指令。

场景

有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。
如快餐店点餐，我们不需要知道厨师是谁，我们只需要把订单交给服务员

优缺点

请求发送者和请求接收者能够消除彼此之间的耦合关系

例子 按钮点击 简单的实现





  
  
  
  Document

如果这个点击事件实现很复杂，需要多人合作完成，那我们不得不深入到button1.onclick内部去修改代码，违背了开放封闭原则

命令模式实现





  
  
  
  Document

JavaScript 作为将函数作为一等对象的语言，跟策略模式一样，命令模式也早已融入到了 JavaScript 语言之中。

js中的命令模式





  
  
  
  Document

设置背景色的例子 撤销命令

我们现在来实现一个撤销操作的例子：
界面上有四个按钮，三个可以设置不同的背景色，undo按钮可以撤销上一次的操作





  
  
  
  Document

重做操作

这里我们增加一个redo按钮，以恢复之前的操作，需要一个currentIndex来记录当前的索引





  
  
  
  Document

云服务器 GPU云服务器命令模式命令链模式 javascript命令模式 ubuntu命令行模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100688.html

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

摘要：命令设计模式涉及三类对象抽象命令类抽象命令类一般是一个抽象类或接口，在其中声明了用于执行请求的等方法，通过这些方法可以调用请求接收者的相关操作。命令模式命令模式定义为：Encapsulate a request as an object,there by letting you parameterize clients with different requests,queue o...

iflove 2019-08-22 14:47 评论0 收藏0
基于Web的svg编辑器（1）——撤销重做功能

摘要：撤销重做是一款编辑器的基础功能，它让用户在进行错误操作后，可以让编辑器回滚到错误操作前的状态。选择实现方案基于对象序列化的实现功能，其中一个方法是基于对象序列化的。示例编辑器的撤销重做功能使用了这种模式。最近在做一个网页版的 svg 编辑器，为此学习了编辑器相关方面的知识。本文是我的一些粗浅学习总结，希望可以给初学者一些思路。前面的话随着近几年前端技术的快速发展，人们更倾向于将应...

Jaden 2019-08-23 17:03 评论0 收藏0
前端应该掌握的linux命令和工具

摘要：大部分前端应用都部署在上，若想全局住一个项目，命令是一项必不可少的技能。编辑器命令非常强大，掌握最最基本的就可以解决问题了。命令模式下接受命令输入且显示在终端，回车生效。常见的命令有，退出，强制退出，保存，保存并退出。大部分前端应用都部署在linux上，若想全局hold住一个项目，linux命令是一项必不可少的技能。许多前端对linux命令并不重视，其实这是一个学习性价比非常高的知识...

tuantuan 2019-05-28 17:04 评论0 收藏0
Linux CentOS7 搭建node服务详细教程

摘要：前言近期在准备搭建一个全栈开发的社区，之前由于没有云服务器搭建经验，这篇文章做一下相关的记录，后续再深入学习研究。或用户登录云服务器，直接使用命令进行连接，如云服务器公网，然后输入用户的初始密码，即可完成登录。云服务器的端口，必须填。前言近期在准备搭建一个vue.js+node.js全栈开发的社区，之前由于没有云服务器搭建经验，这篇文章做一下相关的记录，后续再深入学习研究。本文不局...

CastlePeaK 2019-07-25 13:56 评论0 收藏0