>  기사  >  웹 프론트엔드  >  JavaScript에서 관찰자 패턴을 구현하는 방법

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

亚连
亚连원래의
2018-06-20 16:18:581569검색

아래 편집기는 관찰자 패턴의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.