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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
小程序自定义轮播图圆点组件
Jun 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+javascript液晶时钟
2006/10/09 PHP
php FPDF类库应用实现代码
2009/03/20 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python重新引入被覆盖的自带function
2014/07/16 Python
Python入门篇之列表和元组
2014/10/17 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
前台文员我鉴定
2014/01/12 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
工会工作个人总结
2015/03/03 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python