집 > 기사 > 웹 프론트엔드 > JavaScript에서 책임 사슬 패턴을 구현하는 방법

JavaScript에서 책임 사슬 패턴을 구현하는 방법

亚连원래의: 2018-06-09 14:53:091300검색

이 글은 주로 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에서 책임 사슬 패턴을 구현하는 방법

관련 기사