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 弹出框定位实现方法
Dec 02 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
浅谈Express异步进化史
Sep 09 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
聚美优品陈欧广告词
2014/03/14 职场文书
经典英文广告词
2014/03/18 职场文书
公司承诺书怎么写
2014/05/24 职场文书
手机被没收的检讨书
2014/10/04 职场文书
护理工作心得体会
2016/01/22 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技