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判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
简单的Jquery全选功能
Nov 07 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 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
php 文件上传类代码
2011/08/06 PHP
php MessagePack介绍
2013/10/06 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python脚本实现自动发带图的微博
2016/04/27 Python
Python优先队列实现方法示例
2017/09/21 Python
如何利用python查找电脑文件
2018/04/27 Python
简单了解python代码优化小技巧
2019/07/08 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
python系列 文件操作的代码
2019/10/06 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
Flask处理Web表单的实现方法
2021/01/31 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
explicit和implicit的含义
2012/11/15 面试题
写给保洁员表扬信
2014/01/08 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
公司运动会策划方案
2014/05/25 职场文书
综艺节目策划方案
2014/06/13 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript