JS设计模式之命令模式概念与用法分析


Posted in Javascript onFebruary 06, 2018

本文实例讲述了JS设计模式之命令模式概念与用法。分享给大家供大家参考,具体如下:

客户创建命令;调用者执行该命令;接收者在命令执行时执行相应操作
简单命令对象一般用来消除二个对象(调用者和接收者)之间的耦合,而复杂的命令对象则一般用来封装不可分的或事务性的指令。

命令模式的主要用途是把调用对象(用户界面、API和代理等)与实现操作的对象隔离开。凡是两个对象间互动方式需要有更高的模块化程度时都可以用到这种模式。

命令的意思是用一个简单方法或函数去执行和这个命令相关的实际操作。就如同用遥控器打开电视一样,只按一个按键就可以打开电视,简单、方便。它具体的实现操作我们不用关心。那是有电视器来处理的。电视对遥控器提供了一个接口(信号),遥控器只需要在点击时实现这个接口就可以了。

JS设计模式之命令模式概念与用法分析

Command:
定义命令的接口,声明执行的方法。
ConcreteCommand:
命令接口实现对象,是“虚”的实现;通常会持有接收者,并调用接收者的功能来完成命令要执行的操作。
Receiver:
接收者,真正执行命令的对象。任何类都可能成为一个接收者,只要它能够实现命令要求实现的相应功能。
Invoker:
要求命令对象执行请求,通常会持有命令对象,可以持有很多的命令对象。这个是客户端真正触发命令并要求命令执行相应操作的地方,也就是说相当于使用命令对象的入口。
Client:
创建具体的命令对象,并且设置命令对象的接收者。注意这个不是我们常规意义上的客户端,而是在组装命令对象和接收者,或许,把这个Client称为装配者会更好理解,因为真正使用命令的客户端是从Invoker来触发执行

模式分析

1.命令模式的本质是对命令进行封装,将发出命令的责任和执行命令的责任分割开。
2.每一个命令都是一个操作:请求的一方发出请求,要求执行一个操作;接收的一方收到请求,并执行操作。
3.命令模式允许请求的一方和接收的一方独立开来,使得请求的一方不必知道接收请求的一方的接口,更不必知道请求是怎么被接收,以及操作是否被执行、何时被执行,以及是怎么被执行的。
4.命令模式使请求本身成为一个对象,这个对象和其他对象一样可以被存储和传递。
5.命令模式的关键在于引入了抽象命令接口,且发送者针对抽象命令接口编程,只有实现了抽象命令接口的具体命令才能与接收者相关联。

模式优点

1.降低对象之间的耦合度。
2.新的命令可以很容易地加入到系统中。
3.可以比较容易地设计一个组合命令。
4.调用同一方法实现不同的功能

// 命令
var CreateCommand = function( receiver ){
 this.receiver = receiver;
}
CreateCommand.prototype.execute = function() {
 this.receiver.action();
}
// 接收者 电视
var TVOn = function() {}
TVOn.prototype.action = function() {
  alert("TVOn");
}
// 接收者 电视
var TVOff = function() {}
TVOff.prototype.action = function() {
  alert("TVOff");
}
// 调用者 遥控器
var Invoker = function( tvOnCommand, tvOffCommand ) {
  this.tvOnCommand = tvOnCommand;
  this.tvOffCommand = tvOffCommand;
}
Invoker.prototype.tvOn = function() {
  this.tvOnCommand.execute();
}
Invoker.prototype.tvOff = function() {
  this.tvOffCommand.execute();
}

执行Client

var tvOnCommand = new CreateCommand( new TVOn() );
var tvOffCommand = new CreateCommand( new TVOff() );
var invoker = new Invoker( tvOnCommand, tvOffCommand );
invoker.tvOn();
invoker.tvOff();

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
jQuery 创建Dom元素
May 07 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
详解Vue单元测试case写法
May 24 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 #Javascript
vue一个页面实现音乐播放器的示例
Feb 06 #Javascript
使用百度地图实现地图网格的示例
Feb 06 #Javascript
js中的闭包学习心得
Feb 06 #Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 #Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
You might like
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
python多线程同步之文件读写控制
2021/02/25 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
工厂门卫岗位职责
2013/11/25 职场文书
信息总监管理职责范本
2014/03/08 职场文书
高中军训的心得体会
2014/09/01 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
经理聘任证明
2015/03/02 职场文书
高中优秀作文(范文)
2019/08/15 职场文书