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 相关文章推荐
关于js注册事件的常用方法
Apr 03 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
js实现网页收藏功能
Dec 17 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
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
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
详解Python的Django框架中的模版继承
2015/07/16 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
蔻驰英国官网:COACH英国
2020/07/19 全球购物
服务行业个人求职的自我评价
2013/12/12 职场文书
大二学期个人自我评价
2014/01/13 职场文书
运动会解说词200字
2014/02/06 职场文书
2014年网管工作总结
2014/12/11 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Python自动化爬取天眼查数据的实现
2021/06/15 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android