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 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
express express-session的使用小结
Dec 12 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
浅析vue-router实现原理及两种模式
Feb 11 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
说明的比较细的php 正则学习实例
2008/07/30 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
原生JS轮播图插件
2017/02/09 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
vue多次循环操作示例
2019/02/08 Javascript
浅谈js中的bind
2019/03/18 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
wxPython事件驱动实例详解
2014/09/28 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
Python的多维空数组赋值方法
2018/04/13 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python中列表的含义及用法
2020/05/26 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
周年庆典答谢词
2015/01/20 职场文书
社区敬老月活动总结
2015/05/07 职场文书
工作后的感想
2015/08/07 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS