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或css实现滚动广告的几种方案
Jan 28 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JavaScript实现的简单拖拽效果
Jun 01 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
Bootstrap响应式表格详解
May 23 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
vue中tab选项卡的实现思路
Nov 25 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
SQL Server笔试题
2012/01/10 面试题
外贸主管求职简历的自我评价
2013/10/23 职场文书
员工培训邀请函
2014/02/02 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
生产现场禁烟通知
2015/04/23 职场文书