javascript设计模式 – 职责链模式原理与用法实例

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以上 ）

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