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学习笔记之控制页面实现代码
Feb 27 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
js实现返回顶部效果
Mar 10 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 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
php 时间计算问题小结
2009/01/04 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php向js函数传参的几种方法
2014/08/10 PHP
php中session定期自动清理的方法
2015/11/12 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python写入文件自动换行问题的方法
2019/07/05 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python实现异步IO的示例
2020/11/05 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
会计与审计专业自荐信范文
2014/03/15 职场文书
学前班评语大全
2014/05/04 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL