> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 디자인 패턴 - 행동 - 관찰자

JavaScript 디자인 패턴 - 행동 - 관찰자

王林
풀어 주다: 2024-08-12 18:41:06
원래의
950명이 탐색했습니다.

JavaScript Design Patterns - Behavioral - Observer

관찰자 패턴을 사용하면 객체 간의 일대다 종속성을 정의할 수 있으므로 하나의 객체 상태가 변경되면 모든 종속 항목이 자동으로 알림을 받고 업데이트됩니다.

이 예에서는 다른 클래스가 register() 메소드의 변경 사항 등록을 관찰할 수 있는 간단한 클래스 제품을 만듭니다. 무언가가 업데이트되면 notifyAll() 메서드는 이러한 변경 사항에 대해 모든 관찰자와 통신합니다.

class ObservedProduct {
  constructor() {
    this.price = 0;
    this.actions = [];
  }

  setBasePrice(val) {
    this.price = val;
    this.notifyAll();
  }

  register(observer) {
    this.actions.push(observer);
  }

  unregister(observer) {
    this.actions.remove.filter(function (el) {
      return el !== observer;
    });
  }

  notifyAll() {
    return this.actions.forEach(
      function (el) {
        el.update(this);
      }.bind(this)
    );
  }
}

class Fees {
  update(product) {
    product.price = product.price * 1.2;
  }
}

class Profit {
  update(product) {
    product.price = product.price * 2;
  }
}

export { ObservedProduct, Fees, Profit };
로그인 후 복사

전체 예가 여기에 있습니까? https://stackblitz.com/edit/vitejs-vite-kycyd?file=main.js

결론

한 개체의 상태를 변경하려면 다른 개체를 변경해야 하고, 실제 개체 집합을 미리 알 수 없거나 동적으로 변경하는 경우 이 패턴을 사용하세요.


도움이 되셨기를 바랍니다. 읽어주셔서 감사합니다. ?

접속하자! 다음에서 저를 찾으실 수 있습니다:

  • 매체: https://medium.com/@nhannguyendevjs/
  • 개발자: https://dev.to/nhannguyendevjs/
  • 해시노드: https://nhannguyen.hashnode.dev/
  • 링크드인: https://www.linkedin.com/in/nhannguyendevjs/
  • X(이전 Twitter): https://twitter.com/nhannguyendevjs/
  • 커피 사주세요: https://www.buymeacoffee.com/nhannguyendevjs

위 내용은 JavaScript 디자인 패턴 - 행동 - 관찰자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿