JavaScript에서 관찰자 패턴을 구현하는 방법

아래 편집기는 관찰자 패턴의 JavaScript 기본 구현 예를 여러분과 공유할 것입니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 에디터를 따라가서 살펴볼까요

관찰자 패턴은 게시-구독 패턴이라고도 합니다. 이는 일대다 관계를 정의하여 여러 관찰자 개체가 동시에 특정 주제 개체를 모니터링할 수 있도록 하며 상태를 모니터링합니다. 주제 개체가 변경되면 모든 관찰 개체에 알림이 전송됩니다. 토픽(topic)과 옵저버(observer)라는 두 가지 유형의 객체로 구성되며, 옵저버는 이러한 이벤트를 구독하여 주체를 관찰합니다. 게시자와 구독자는 완전히 분리되어 상대방의 존재를 알 수 없습니다. . 맞춤 이벤트의 이름을 공유하세요.

Nodejs에서는 이 모드에 대한 기본 지원이 EventEmitter를 통해 구현됩니다.

JavaScript의 이벤트 청취 메커니즘은 관찰자 패턴으로 이해될 수 있습니다. onclick을 통해 이벤트를 바인딩한 다음 대화형 동작을 통해 트리거하거나 이벤트를 적극적으로 트리거합니다.

다음은 JS 맞춤형 PubSub입니다. 다음 코드를 주의 깊게 읽으면 관찰자 패턴을 이해하는 데 도움이 됩니다.

1은 옵저버 클래스 PubSub

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }

2를 정의합니다. 코드 shift.call(arguments)에서 인수 객체는 함수의 내장 객체이며, 메소드를 호출할 때 전달된 실제 매개변수 그룹을 얻을 수 있습니다. shift 메소드는 배열의 첫 번째 매개변수인 유형 유형을 가져옵니다.

4. 이벤트 구독 취소 끄기 구현

//传入事件类型type和事件处理handle
 on: function (type, handle) {
  if(!this.handles[type]){
   this.handles[type] = [];
  }
  this.handles[type].push(handle);
 }

전체 코드:

emit: function () {
  //通过传入参数获取事件类型
 var type = Array.prototype.shift.call(arguments);
  if(!this.handles[type]){
   return false;
  }
 for (var i = 0; i < this.handles[type].length; i++) {
   var handle = this.handles[type][i];
   //执行事件
  handle.apply(this, arguments);
  }
 }

5. 테스트

off: function (type, handle) {
  handles = this.handles[type];
  if(handles){
   if(!handle){
    handles.length = 0;//清空数组
  }else{
    for (var i = 0; i < handles.length; i++) {
     var _handle = handles[i];
     if(_handle === handle){
      handles.splice(i,1);
     }
    }
   }
  }
 }

내가 당신을 위해 편집한 것입니다. 미래는 모두에게 도움이 됩니다.

관련 기사: Angular에서 민감한 텍스트 프롬프트를 구현하는 방법

Angular에서 숨겨진 디스플레이를 구현하는 방법

js에서 이미지의 왼쪽 및 오른쪽 슬라이딩을 구현하는 방법

위 내용은 JavaScript에서 관찰자 패턴을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!