扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要讲解了如何使用javascript中的职责链模式，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
创新互联公司自2013年创立以来，是专业互联网技术服务公司，拥有项目成都网站建设、网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元坊子做网站,已为上家服务,为坊子各地企业和个人服务,联系电话:028-86922220
介绍：很多情况下，在一个软件系统中可以处理某个请求的对象不止一个。例如一个网络请求过来，需要有对象去解析request Body，需要有对象去解析请求头，还需要有对象去对执行对应controller。请求一层层传递，让每一个对象都基于请求完成自己的任务，然后将请求传递给下一个处理程序。是不是感觉有点中间件的感觉。
定义：职责链就是避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求。将这些对象连成一条链，并沿着链传递请求，直到有对象处理它为止。职责链模式是一种对象行为型模式。
场景：我们继续画圆，我们准备了两组示例：
示例：
var Circle = function(){
this.radius = 0;
this.drawByRadius = function(radius){
if(radius < 5){
this.drawVerySmalCircle();
}else if(radius < 10){
this.drawSmalCircle();
}else if(radius < 15){
this.drawMediumCircle();
}else if(radius < 20){
this.drawBigCircle();
}else{
this.drawVeryBigCircle();
}
}
this.drawVerySmalCircle = function(){
console.log('画一个超小的圆（ 5以下 ）');
}
this.drawSmalCircle = function(){
console.log('画一个小圆（ 5-10 ）');
}
this.drawMediumCircle = function(){
console.log('画一个中圆 （ 10-15 ）');
}
this.drawBigCircle = function(){
console.log('画一个大圆 （ 15-20 ）');
}
this.drawVeryBigCircle = function(){
console.log('画一个超大的圆 （ 20以上 ）');
}
}
var circle = new Circle();
circle.drawByRadius(30);
//画一个超大的圆 （ 20以上 ）观察上面的代码，这是很常见的逻辑，通过参数来决定执行哪个方法。首先drawByRadius方法职责过重，其次这样的方式在修改，新增时需要修改源代码，不符合开关原则。
我们使用职责链模式重写下：
var drawSmalCircle = function(min,max){
this.max = max;
this.min = min;
this.nextCircle;
this.setNextDraw = function(circle){
this.nextCircle = circle;
}
this.draw = function(radius){
console.log('执行：drawSmalCircle');
if(this.min < radius && radius < this.max){
console.log('画一个小圆（ 10以下 ）');
}
if(this.nextCircle){
this.nextCircle.draw(radius)
}
}
}
var drawMediumCircle = function(min,max){
this.max = max;
this.min = min;
this.nextCircle;
this.setNextDraw = function(circle){
this.nextCircle = circle;
}
this.draw = function(radius){
console.log('执行：drawMediumCircle');
if(this.min < radius && radius < this.max){
console.log('画一个中圆 （ 10-20 ）');
}
if(this.nextCircle){
this.nextCircle.draw(radius)
}
}
}
var drawBigCircle = function(min,max){
this.max = max;
this.min = min;
this.nextCircle;
this.setNextDraw = function(circle){
this.nextCircle = circle;
}
this.draw = function(radius){
console.log('执行：drawBigCircle');
if(this.min < radius && radius < this.max){
console.log('画一个大圆 （ 20以上 ）');
}
if(this.nextCircle){
this.nextCircle.draw(radius)
}
}
}
function initChain(){
var smalCircle = new drawSmalCircle(0,10);
var mediumCircle = new drawMediumCircle(10,20);
var bigCircle = new drawBigCircle(20,100);
smalCircle.setNextDraw(mediumCircle);
mediumCircle.setNextDraw(bigCircle);
return smalCircle;
}
var circle = initChain();
circle.draw(30)
// 执行：drawSmalCircle
// 执行：drawMediumCircle
// 执行：drawBigCircle
// 画一个大圆 （ 20以上
circle.draw(15)
// 执行：drawSmalCircle
// 执行：drawMediumCircle
// 画一个中圆 （ 10-20 ）
// 执行：drawBigCircle
circle.draw(5)
// 执行：drawSmalCircle
// 画一个小圆（ 10以下 ）
// 执行：drawMediumCircle
// 执行：drawBigCircle以上就是职责链模式的实例代码，drawSmalCircle，drawMediumCircle，drawBigCircle称为处理者类，处理者类保存了下一级对象的引用，
当我每执行一次draw时，程序会挨个执行职责链上的每一个方法。
职责链模式分为纯职责链和不纯职责链，纯的职责链在处理请求时，只能选择全部处理不传递或者全部传递不处理。我们这里的例子就是不纯职责链。它允许处理完成后继续向后传递。
职责链模式总结：
优点：
* 降低耦合，互相都不清楚执行顺序以及执行处理的类。
* 请求对象仅需维持一个指向其后继者的引用，简化了对象的相互连接。
* 新增修改职责链结构方便，满足开关原则。
缺点：
* 由于没有明确接受者，可能职责链走到最后都没有被正确处理。
* 职责链较长时会导致系统性能受影响。
* 建链不当，会造成循环调用，导致系统陷入死循环。
适用场景：
* 多个对象处理同一请求
* 动态创建执行顺序，流程
看完上述内容，是不是对如何使用javascript中的职责链模式有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网