집 > 기사 > 웹 프론트엔드 > JavaScript 책임 체인 패턴 인스턴스 메소드

JavaScript 책임 체인 패턴 인스턴스 메소드

小云云원래의: 2018-01-27 09:44:571408검색

이 글은 주로 JavaScript로 구현된 책임 사슬 모델에 대한 개요를 소개하며, 책임 사슬 모델이 어떻게 구현되는지 자세히 소개합니다. 관심 있는 친구들이 참고하면 좋겠습니다. 모두에게 도움이 될 수 있습니다.

책임 사슬 패턴이란 무엇입니까

책임 사슬 패턴의 정의는 여러 개체가 요청을 처리할 수 있는 기회를 갖도록 허용하여 요청의 보낸 사람과 받는 사람 간의 결합 관계를 피하는 것입니다. 이러한 객체를 하나의 체인으로 연결하고 객체가 처리할 때까지 체인을 따라 요청을 전달합니다. 예를 들어 버스를 뒷문으로 탔을 때 동전이 어디에 있는지 모르기 때문에 현금함에 직접 넣을 수는 없습니다. 그러면 앞에 있는 사람에게만 동전을 줄 수 있습니다. 그리고 그 사람이 당신 앞에 있는 사람에게 그것을 전달할 수 있도록 도와주고, 그런 다음 현금 상자 옆에 서있는 사람의 손에 전달하면 그 사람이 동전을 현금 상자에 넣을 것입니다.

책임 체인 패턴 아이디어

요청 발신자는 체인의 첫 번째 노드만 알면 되므로 발신자와 수신자 그룹 간의 강력한 연결이 약화됩니다.

JavaScript는 책임 사슬 모드(AOP 방식)를 구현합니다

 Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
     return fn.apply(this, arguments);
    }
    return ret;
  }
 }

네, JavaScript에서 책임 사슬 모드를 구현하는 것은 너무 간단합니다. 위의 AOP 코드를 이해하지 못한다면 다음을 참조하세요. 이전에 작성한 이 기사는 JavaScript에서 AOP를 구현한 것입니다. 이 방법은 코드 관점에서 보면 매우 유사하지만 시작점은 완전히 다릅니다.

AOP는 데코레이터 패턴을 구현합니다. : 기존 함수의 내부 상황을 변경하지 않고 아래에 몇 가지 새로운 함수를 추가합니다. 이후에 호출할 때마다 원 외부에 다른 원을 추가하여 감싸는 것과 같습니다. 이는 포괄적인 관계입니다.

AOP는 책임 사슬 모델을 구현합니다. 함수가 실행된 후 다음 함수를 실행할지 여부를 결정하는 것은 기존 함수 뒤에 함수를 추가하는 것과 같습니다. 후자의 함수를 실행하려면 이전 함수의 반환 값에 따라 달라집니다. 체인 관계라는 점에 유의하세요

책임 체인 패턴의 예

function cat (type) {
  if(type == "cat") {
    console.log("我是猫猫");
  } else {
    return "nextSuccessor"
  }
}

function dog (type) {
  if(type == "dog") {
    console.log("我是狗狗");
  } else {
    return "nextSuccessor"
  }
}

function pig (type) {
  if(type == "pig") {
    console.log("我是猪猪");
  } else {
    return "nextSuccessor"
  }
}

Function.prototype.after = function(fn) {
  var _self = this;

  return function () {
    var ret = _self.apply(this, arguments);
    if(ret === "nextSuccessor") {
      return fn.apply(this, arguments);
    }
    return ret;
  }
}


var pet = cat.after(dog).after(pig);

pet("pig"); //我是猪猪
pet("dog"); //我是狗狗
pet("cat"); //我是猫猫

위의 코드를 살펴보세요. 세 가지 다른 매개변수를 pet 메소드에 전달하여 다른 결과를 얻었습니다. 첫 번째 호출을 예로 들면, 실행 과정은 다음과 같습니다: cat 메소드에 의해 먼저 판단된 "pig"를 전달합니다. cat 메소드는 이를 처리할 수 없음을 발견하여 dog 메소드에 "pig"를 전달합니다. (return "nextSuccessor"는 다음 함수로의 전송을 나타냄) dog 메서드는 이를 처리할 수 없음을 확인한 다음 "pig"를 pig 메서드에 전달하고 콘솔은 I am a를 인쇄합니다. 돼지.

이것이 에너지 낭비가 아니라고 생각할 수도 있습니다. 위의 코드를 사용하면 왜 이렇게 많은 코드를 작성해야 할까요? 훨씬 간단합니다. 그런데 만약 미래에 갑자기 원숭이가 나타난다면 위의 가비지 코드를 사용한다면 펫 함수의 소스코드를 수정하고 실제로 원숭이인지 판단하는 if 문을 추가해야 할 것이라는 점을 생각해보신 적 있으신가요? 이거 나쁘지 않은데, 10,000마리의 동물이 추가된다면 어떨까요? 그런 다음 pet 함수에 10,000개의 if 문을 추가해야 합니다. 무엇입니까? 충분히 화려하지 않습니까? 동물이 여러 품종으로 나눌 수 있다는 사실을 생각해 본 적이 있나요? 예를 들어, 고양이는 장모종 고양이와 단모종 고양이로 구분됩니다. 이렇게 하면 코드에 중첩된 if 문이 포함됩니다. 존경하는 마음을 담아, 당신의 코드는 이제 개처럼 추악합니다, 히히

하지만 책임 사슬 모델을 사용하는 경우 각 추가 동물에 대해 함수를 정의한 다음 책임 사슬에 추가합니다. .. 이런 식으로 새로운 기능은 원래 기능과 매우 분리되어 있지 않나요?

JavaScript 책임 체인 패턴 인스턴스 메소드

관련 기사