JavaScript设计模式——职责链模式
<p> 职责链模式是计划模式中举动型的一种计划模式；</p><p> <strong>界说：</strong></p>
<blockquote>
<p> 使多个对象都有机会处理哀求，从而克制哀求的发送者与接收者之间的耦合关系，将这些处理哀求的对象形成一个链，并沿着这个链传递哀求，直到有一个对象处理它为止；</p>
</blockquote>
<p><strong> 白话表明：<br /></strong></p>
<p><strong> </strong>作者坐标武汉，1000+万人口的新一线都会 ；以早高峰公交为例，早上早高峰的时间通常都是公交车前门拥堵，以至于没办法刷卡搭车；但是后门相对来说会空一些，这时我们选择后门上车，但是我们后门上车就刷不了卡；逃单？不存在的，这可不是我们作为讲文明、有素质的新一代青年应该做的；于是，我们往前面传递公交卡，哀求前面的搭客帮忙传递至刷卡器处刷卡，但是我们是在后门，刷卡器是在前门，我们这传递的过程中会通过哀求多位搭客帮忙传递公交卡，这个传递的过程就是一种职责链模式，每一位传递的搭客就是职责链中的节点对象；<br /></p>
<p><strong> 代码实现：</strong></p>
<p><strong> </strong>假设有一个售卖手机的电商网站，经太过别缴纳500元定金和200元订价的两轮预定后（订单此时天生），如今已经到了正式购买的阶段。公司针对支付过定金的客户有肯定的优惠政策。在正式购买时，已支付过500元定金的客户将得到100元商城优惠券，已支付过200元的客户将得到50元商城优惠券；而之前没有支付过定金的客户将没有任何优惠券，而且在库存有限的情况下，还不愿定能买得到；<br /></p>
<p> 参数界说：</p>
<p> 1.orderType：表现订单范例（定金用户或普通用户），code的值为1的时间是500元定金用户，为2的时间是200元定金用户，为3的时间是普通用户；<br /></p>
<p> 2.pay：表现用户是否已经支付定金，值为true或false。虽然用户下过500元的定金的订单，但假如他一直没有支付定金，如今只能以普通用户的身份举行购买；</p>
<p> 3.stock：表现普通用户用于购买手机的库存数量，已经支付过500元定金大概200元定金的客户不受此限定；</p>
<p> 实现：</p>
var order = function( orderType, pay, stock ){
if ( orderType === 1 ){ // 500 元定金购买模式
if ( pay === true ){ // 已支付定金
console.log( '500 元定金预购, 得到100 优惠券' );
}else{ // 未支付定金，降级到普通购买模式
if ( stock > 0 ){ // 用于普通购买的手机另有库存
console.log( '普通购买, 无优惠券' );
}else{
console.log( '手机库存不足' );
}
}
}
else if ( orderType === 2 ){ // 200 元定金购买模式
if ( pay === true ){
console.log( '200 元定金预购, 得到50 优惠券' );
}else{
if ( stock > 0 ){
console.log( '普通购买, 无优惠券' );
}else{
console.log( '手机库存不足' );
}
}
}
else if ( orderType === 3 ){
if ( stock > 0 ){
console.log( '普通购买, 无优惠券' );
}else{
console.log( '手机库存不足' );
}
}
};
order( 1 , true, 500); //500 元定金预购, 得到100 优惠券
<p> 上面的代码固然能实现需求功能，但是上述代码显着结构不清楚且order函数方法巨大，耦合程度很高；</p>
<p> </p>
<p><strong> 职责链模式实现：</strong></p>
<p> 我们使用职责链模式来实现上述功能，我们先把500元定金订单、200元定金订单、普通订单分为3个函数，接下来把orderType、pay、stock这3个参数传入；假如500元订单函数不符合处理条件，就将这个哀求传递给200元订单函数，假如200元订单函数也不符合处理条件，则就将这个哀求传递给普通订单函数；</p>
<p> </p>
var order500 = function( orderType, pay, stock ){
if ( orderType === 1 && pay === true ){
console.log( '500 元定金预购, 得到100 优惠券' );
}else{
order200( orderType, pay, stock ); // 将哀求传递给200 元订单
}
};
// 200 元订单
var order200 = function( orderType, pay, stock ){
if ( orderType === 2 && pay === true ){
console.log( '200 元定金预购, 得到50 优惠券' );
}else{
orderNormal( orderType, pay, stock ); // 将哀求传递给普通订单
}
};
// 普通购买订单
var orderNormal = function( orderType, pay, stock ){
if ( stock > 0 ){
console.log( '普通购买, 无优惠券' );
}else{
console.log( '手机库存不足' );
}
};
// 测试结果：
order500( 1 , true, 500); // 500 元定金预购, 得到100 优惠券
order500( 1, false, 500 ); // 普通购买, 无优惠券
order500( 2, true, 500 ); // 200 元定金预购, 得到500 优惠券
order500( 3, false, 500 ); // 普通购买, 无优惠券
order500( 3, false, 0 ); // 手机库存不足
<p> 可以看到经过修改之后的代码，结构比之前的要清楚很多，拆分了函数而且去掉了很多if-else分支判断；</p>
<p> 纵然假如，修改后的代码依然是违反开放/封闭原则的，由于假如我们后面需求变动，就必须修改这些函数的内部；这显然不是我们想要的；</p>
<p> 改良：</p>
<p> 我们先约定该函数不符合处理条件就返回nextSuccessor，假如符合处理条件就实行；</p>
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( '手机库存不足' );
}
};
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 );
console.log(ret);
//ret等于nextSuccessor就是不符合处理条件还得往下实行
if ( ret === 'nextSuccessor' ){
//这里是逻辑短路返回，并集一假则假；假如this.successor存在，则返回后面的实行结果；假如this.successor不存在,则返回this.nextSuccessor的值即为undefined
return this.successor && this.successor.passRequest.apply( this.successor, arguments );
}
};
var chainOrder500 = new Chain( order500 );
var chainOrder200 = new Chain( order200 );
var chainOrderNormal = new Chain( orderNormal );
//沿职责链节点传递
chainOrder500.setNextSuccessor( chainOrder200 );
chainOrder200.setNextSuccessor( chainOrderNormal );
chainOrder500.passRequest( 1, true, 500 ); // 500 元定金预购，得到100 优惠券
chainOrder500.passRequest( 2, true, 500 ); // 200 元定金预购，得到50 优惠券
chainOrder500.passRequest( 3, true, 500 ); // 普通购买，无优惠券
chainOrder500.passRequest( 1, false, 0 ); // 手机库存不足
<p> 通过改良后，纵然后面需求变动要出现定金300的订单，我们也可以轻松应对；</p>
<p> </p>
var order300=function(){
//具体实现的举动
};
chainOrder300=newChain(order300);
chainOrder500.setNextSuccessor(chainOrder300);
chainOrder300.setNextSuccessor(chainOrder200);
<p> </p>
<p> </p>
<p><strong> tips：</strong></p>
<p> 补充知识：逻辑短路；虽然这时JS基础的知识，但是难免会有忘记，我在写这篇文章的时间就忘了；</p>
<p> <strong>并集一假得假：</strong>假如是并集（而且）关系则第一个数是假的或不存在的，直接返回第二个数的值；</p>
<p> </p>
var x = a && b && c 等价于
var x = a;
if(a){
x = b;
if(b){
x = c;
}
}
<p> </p>
<p><strong> 或集一真得真：</strong>假如是或集（大概）关系，则第一个数是真的直接返回第一个数，第一个数是假的直接返回第二个；</p>
var x = a || b || c 等价于：
var x;
if(a){
x = a;
} else if(b){
x = b;
} else {
x = c;
}
<p> 记住上面加粗的两句话，根本就可以纯熟运用逻辑短路了；</p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/dengyao-blogs/p/11725141.html" target="_blank">https://www.cnblogs.com/dengyao-blogs/p/11725141.html</a>
页:
[1]