JavaScript设计模式之职责链模式应用示例


Posted in Javascript onAugust 07, 2018

本文实例讲述了JavaScript设计模式之职责链模式。分享给大家供大家参考,具体如下:

一、职责链的定义:

使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。

二、实例场景说明:

某公司对公司产品-手机进行促销活动,有以下政策:在正式购买时,已经支付过500元定金的用户会收到100元的商城优惠卷,交200元定金的用户可以收到50元的优惠卷,而之前没有支付定金的用户只能进入普通购买模式,也就是没有优惠卷,主要危险为在库存有限的情况下不一定能买到手机。

三、实例代码如下:

1、创建3中购买模式的函数对象,如下:

/**
* @param: orderType 表示订单类型
* @param: pay 表示用户是否已经支付定金
* @param: stock 表示当前用户普通购买的手机库存数量,交过定金的用户不受此限制
**/
var order500 = function( orderType, pay, stock ){
  if( orderType === 1 && pay === true)
     console.log('500元定金预购,得到100优惠卷');
  else
     return 'nextSuccessor'; //不知道下一个节点是谁,反正把请求往后面传递
};
var order200 = function( orderType, pay, stock){
  if( orderType === 2 && pay === true)
    console.log( '200元定金预购,得到50元优惠卷' );
  else
    return 'nextSuccessor';
};
var orderNormal = function(orderType, pay, stock){
  if(stock > 0)
    console.log('普通购买,无优惠卷');
  else
    console.log('手机库存不足');
};

2、书写一个把函数包装进职责链节点的构造函数,如下:

var Chain = function(fn){
  this.fn = fn;
  this.successor = null;
};
Chain.prototype.setNextSuccessor = function( successor ){
  return this.successor = successor;
};
Chain.prototype.passRequest = function(){
  var ret = this.fn.apply( this, arguments );
  if( ret === 'nextSuccessor'){
    return this.successor && this.successor.passRequest.apply( this,successor, arguments );
  }
   return ret;
};

3、调用如下:

1> 把3个订单函数分别包装成职责链的节点:

var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );

2> 指定节在职责链中的顺序:

chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );

3> 把请求传递给第一个节点,如下:

chainOrder500.passRequest( 1, true, 500 ); //输出:500元定金预购,得到100优惠卷
chainOrder500.passRequest( 2, true, 500 ); //输出:200元定金预购,得到50优惠卷
chainOrder500.passRequest( 3, true, 500 ); //输出:普通购买,无优惠卷
chainOrder500.passRequest( 1, false, 0 ); //输出:手机库存不足

四、职责链模式优点:

通过上述代码,我们可以灵活的添加和删除节点,以及可灵活的修改节点的顺序。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
node使用Koa2搭建web项目的方法
Oct 17 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
Vue实现验证码功能
Dec 03 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
jQuery实现评论模块
Aug 19 jQuery
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 #Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 #Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 #Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 #Javascript
深入浅析var,let,const的异同点
Aug 07 #Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 #Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 #Javascript
You might like
php 远程图片保存到本地的函数类
2008/12/08 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
小程序实现录音功能
2020/09/22 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
python创建文件备份的脚本
2018/09/11 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
利用python 读写csv文件
2020/09/10 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
化工专业大学生职业生涯规划书
2014/01/14 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
2014年教学工作总结
2014/11/13 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
为自己工作观后感
2015/06/11 职场文书
三好学生竞选稿
2015/11/21 职场文书
公司与个人合作协议书
2016/03/19 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL