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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
JS高级程序设计之class继承重点详解
Jul 07 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Js面试算法详解
2018/04/08 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
python实现微信远程控制电脑
2018/02/22 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python 获取项目根路径的代码
2019/09/27 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
关于Python解包知识点总结
2020/05/05 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
汽车驾驶求职信
2013/10/25 职场文书
机械专业求职信
2014/05/25 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS