javascript设计模式 ? 命令模式原理与用法实例分析


Posted in Javascript onApril 20, 2020

本文实例讲述了javascript设计模式 ? 命令模式原理与用法。分享给大家供大家参考,具体如下:

介绍:命令模式是一种数据驱动的设计模式,将请求以命令的形式包裹在对象中,并传递给调用对象。命令模式的核心在于引入了命令类,通过命令类来降低发送者和接受者的耦合度。

定义:将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化;对请求排队或者记录请求日志,以及支持可撤销的操作。命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务(Transaction)模式。

场景:我们通过买卖股票的场景来实现下命令模式,

示例:

var Stock = function(){
  this.name = 'baidu';
  this.quantity = 100;
  this.buy = function(){
    console.log('购买了:' + this.quantity + '股' + this.name);
  }
  this.sell = function(){
    console.log('卖出了:' + this.quantity + '股' + this.name);
  }
}
 
var BuyStock = function(stock){
  this.stock = stock;
 
  this.execute = function(){
    this.stock.buy();
  }
}
 
var SellStock = function(stock){
  this.stock = stock;
 
  this.execute = function(){
    this.stock.sell();
  }
}
 
var Broker = function(){
  this.orderList = [];
 
  this.takeOrder = function(order){
    this.orderList.push(order);
  }
  this.placeOrders = function(){
    this.orderList.map(function(item){
      item.execute();
    })
    this.orderList = [];
  }
}
 
var stock = new Stock();
var buyStock = new BuyStock(stock);
var sellStock = new SellStock(stock);
 
var broker = new Broker();
broker.takeOrder(buyStock);
broker.takeOrder(sellStock);
broker.placeOrders();
// 购买了:100股baidu
// 卖出了:100股baidu

这个例子里面SellStock,BuyStock为命令类,执行实际的命令。Broker用来接收命令,并在指定的时机执行命令。Stock为请求受体,

回头看下定义:sellStock,buyStock就是将命令封装好的对象,你可以通过对象的execute方法执行该命令。通过扩展placeOrders方法可以支持请求队列或者记录请求日志,以及支持可撤销等操作

命令模式总结:

优点:
* 降低系统耦合度
* 新的命令很容易的加入到系统中

缺点:
* 使用命令模式可能会导致某些系统有过多的具体命令类

适用场景:
* 系统需要将请求调用者和请求接受者解耦

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
JS实现横向跑马灯效果代码
Apr 20 #Javascript
vue2.x数组劫持原理的实现
Apr 19 #Javascript
vue2.x 对象劫持的原理实现
Apr 19 #Javascript
基于js判断浏览器是否支持webGL
Apr 18 #Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 #Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 #Javascript
You might like
header导出Excel应用示例
2014/01/24 PHP
php安装swoole扩展的方法
2015/03/19 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
JavaScript使用canvas绘制随机验证码
2020/02/17 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
Python中max函数用法实例分析
2015/07/17 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python中and和or如何使用
2020/05/28 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python中如何使用虚拟环境
2020/10/14 Python
Django xadmin安装及使用详解
2020/10/26 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
C#面试题问题集
2016/04/02 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
3分钟演讲稿
2014/04/30 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2015年维修工作总结
2015/04/25 职场文书
公司辞职信模板
2015/05/13 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
导游词之麻姑仙境
2019/11/18 职场文书