javascript 디자인 모델 C 직책 체인 모델 원리 와 용법 사례 분석

본 논문 의 사례 는 자바 script 디자인 모델 C 직책 체인 모델 의 원리 와 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
소개:한 소프트웨어 시스템 에서 어떤 요청 을 처리 할 수 있 는 대상 이 한 명 이 아 닌 경우 가 많다.예 를 들 어 네트워크 요청 이 오 면 대상 이 request Body 를 분석 해 야 하고 대상 이 요청 헤드 를 분석 해 야 하 며 대상 이 대응 하 는 contrller 를 실행 해 야 합 니 다.모든 대상 이 요청 에 따라 자신의 임 무 를 완성 하도록 층 층 이 전달 해 달라 고 요청 한 다음 요청 을 다음 처리 프로그램 에 전달 합 니 다.약간 미들웨어 느낌 아니 야?
정의:직책 체인 은 요청 발송 자 와 수신 자가 결합 하지 않도록 여러 대상 이 요청 을 받 을 수 있 도록 하 는 것 입 니 다.이 대상 들 을 하나의 체인 으로 연결 하고 대상 이 처리 할 때 까지 체인 을 따라 요청 을 전달 합 니 다.직책 체인 모델 은 대상 행위 형 모델 이다.
장면:우 리 는 계속 원 을 그리고 우 리 는 두 조 의 예 를 준비 했다.
예시:

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,drawMedium Circle,drawBigCircle 은 처리 자 클래스 라 고 부 르 고 처리 자 류 는 다음 단계 대상 의 인용 을 저장 합 니 다.
내 가 draw 를 실행 할 때마다 프로그램 은 직책 체인 의 모든 방법 을 수행 합 니 다.
직책 체인 모델 은 순수한 직책 체인 과 불순 한 직책 체인 으로 나 뉘 는데 순수한 직책 체인 은 요 구 를 처리 할 때 모든 처리 가 전달 되 지 않 거나 전부 전달 되 지 않 는 것 만 선택 할 수 있다.우리 가 있 는 이곳 의 예 는 바로 불순 한 직책 체인 이다.그것 은 처리 가 끝 난 후에 계속 뒤로 전달 할 수 있 도록 허락 한다.
직책 체인 모델 요약:
장점:
*결합 을 낮 추고 실행 순서 와 실행 처 리 를 잘 모 르 는 클래스 입 니 다.
*요청 대상 은 후계 자 를 가리 키 는 인용 만 유지 하고 대상 의 상호 연결 을 간소화 합 니 다.
*직책 체인 구 조 를 수정 하 는 것 이 편리 하고 스위치 원칙 을 만족 시 킵 니 다.
단점:
*명확 한 수용자 가 없 기 때문에 직책 체인 이 끝까지 제대로 처리 되 지 않 았 을 수 있 습 니 다.
*직책 체인 이 길 면 시스템 성능 에 영향 을 줄 수 있 습 니 다.
*체인 을 잘못 구축 하면 순환 호출 을 초래 하고 시스템 이 순환 에 빠 질 수 있 습 니 다.
적용 필드:
*여러 개체 가 같은 요청 을 처리
*동적 생 성 실행 순서,절차
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.,,,,,javascript 대상 입문 강좌,JavaScript 오류 및 디 버 깅 기술 요약,JavaScript 데이터 구조 와 알고리즘 기술 총화과JavaScript 스 트 리밍 알고리즘 및 기술 총화.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.