首页 > 开发 > 前端 > 正文

JavaScript设计模式_职责链模式

2017-07-01 22:24:27  来源:慕课网

职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,我们把这些对象称为链中的节点。

如下图所示:
图片描述

/**
pre:职责链模式
定义:一系列可能处理请求的对象链接成一条链,
请求在这条链中传递,直到遇到一个可以处理它的对象。*/// --------- 示例 1 -----------/**
某品牌手机销售,交500元定金可得100元电商优惠券,交300元可得50元优惠券,
没有交定金的用户只能进行普通购买,而且还不一定能买的到。
将这一过程用代码写出来:
orderType: 1,交500定金;2,交300元定金,3,普通购买
pay:true 已支付定金,false未支付定金
stock:手机库存数/var order = (function() {var favorCache = { // 优惠配置1: [500, 100],2: [300, 50]};var normal = function(stock) { // 普通购买if(stock > 0) {console.log("普通购买.库存数:" + stock);} else {console.log("库存不足.");}};var preOrder = function(orderType, pay) { // 预付定金if(orderType in favorCache && pay) {console.log("支付定金:" + favorCache[orderType][0] + ",获得" + favorCacheorderType + "元优惠券.");return true;}return false;};return function(orderType, pay, stock) {preOrder(orderType, pay) || normal(stock);}})();order(1, true, 500);order(1, false, 500);order(2, true, 200);order(3, false, 100);order(3, false, 0);// ------------- 示例2 --------------/ 
使用职责链模式实现功能*/var order500 = function(orderType, pay, stock) {if(orderType === 1 && pay) {console.log("支付定金:500元,获得100元优惠券.");} else {order300(orderType, pay, stock);}};var order300 = function(orderType, pay, stock) {if(orderType === 2 && pay) {console.log("支付定金:300元,获得50元优惠券.");} else {orderNormal(orderType, pay, stock);}};var orderNormal = function(orderType, pay, stock) {if(stock > 0) {console.log("普通购买.库存数:" + stock);} else {console.log("库存不足.");}};order500(1, true, 500);order500(1, false, 500);order500(2, true, 200);order500(3, false, 100);order500(3, false, 0);/**
不足:虽然把函数拆分成互不影响的3个小函数,但是传递请求的代码被耦合在业务函数之中,
这样的请求传递非常的僵硬,也违背了开放-封闭原则。*///--------------- 示例3 -------------/**
改进上面的职责链模式,让每个节点可以单独拆分和重组.*/var order500 = function(orderType, pay, stock) {if(orderType === 1 && pay) {console.log("支付定金:500元,获得100元优惠券.");} else {return "next";}};var order300 = function(orderType, pay, stock) {if(orderType === 2 && pay) {console.log("支付定金:300元,获得50元优惠券.");} else {return "next";}};var orderNormal = function(orderType, pay, stock) {if(stock > 0) {console.log("普通购买.库存数:" + stock);} else {console.log("库存不足.");}};// -- 定义链节点函数 --var Chain = function(fn) {this.fn = fn;this.next = null;};Chain.prototype.setNext = function(next) {this.next = next;};Chain.prototype.passRequest = function() {var result = this.fn.apply(this, arguments);if("next" === result) {return this.next && this.next.passRequest.apply(this.next, arguments);}return result;};var chain500 = new Chain(order500);var chain300 = new Chain(order300);var chainNormal = new Chain(orderNormal);chain500.setNext(chain300);chain300.setNext(chainNormal);
chain500.passRequest(1, true, 500);chain500.passRequest(1, false, 500);chain500.passRequest(2, true, 200);chain500.passRequest(3, false, 100);chain500.passRequest(3, false, 0);//---------- 示例4 -----------/**
上个示例中,已经实现了一个职责链模式,但在现实中,我们往往是
根据一个异步请求的结果,来决定是否执行下一个函数。*/var Chain = function(fn) {this.fn = fn;this.next = null;};Chain.prototype.setNext = function(next) { // 设置下一个执行函数return this.next = next;};Chain.prototype.passRequest = function() { // 传递请求var result = this.fn.apply(this, arguments);if("next" === result) {return this.next && this.next.passRequest.apply(this.next, arguments);}return result;};Chain.prototype.executeNext = function() { // 主动执行下一个函数return this.next && this.next.passRequest.apply(this.next, arguments);};var fn1 = new Chain(function() {console.log(1);return "next";});var fn2 = new Chain(function() {console.log(2);var self = this;setTimeout(function() {self.executeNext();}, 2000); // 模拟异步回调});var fn3 = new Chain(function() {console.log(3);});fn1.setNext(fn2).setNext(fn3);fn1.passRequest();/**
经过这些例子,我们总结一下职责链模式的优缺点:
优点:
1、各个处理函数互不影响,各自独立;
2、删除、增加节点比较灵活,不需要改动其他函数的代码; 
3、可以手动指定起始节点。比如手机商城的例子,付过定金的订单全部结束购买流程后,
完全可以把请求交给普通订单处理:orderNormal(1,false,500);
缺点:
1、我们不能保证某个请求一定会被职责链中的节点处理;
2、某些请求被处理时,可能会经历多个节点,会给系统带来性能损耗。*/// ----------- 示例5 --------------/**
利用js函数式的特性,创建职责链*/Function.prototype.after = function(fn) {var self = this;return function() {var result = self.apply(this, arguments);if("next" === result) {return fn.apply(this, arguments);}return result;}};var fn1 = function() {console.log(1);return "next";};var fn2 = function() {console.log(2);return "next";};var fn3 = function() {console.log(3);};var ff = fn1.after(fn2).after(fn3);ff();


作者:『Stinchan』 出处:http://www.cnblogs.com/stinchan/p/7057818.html