관찰자 Pattern_javascript 기술의 JavaScript 기본 구현 예

아래 편집기에서는 관찰자 패턴의 JavaScript 기본 구현인 JavaScript 소스 코드의 예를 공유합니다. JavaScript에 관심이 있다면 편집기를 따라 살펴보세요

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

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

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

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

1. 관찰자 클래스 Pubsub

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

2에서 이벤트 구독을 구현합니다.

3. 이벤트 출시 실행

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

설명해야 할 것은 Array.prototype.shift.call(arguments) 코드입니다. 인수 객체는 함수의 내장 객체이며 실제 매개변수 그룹을 얻을 수 있습니다. 메소드를 호출할 때 전달됩니다.

shift 메소드는 배열의 첫 번째 매개변수인 유형 유형을 가져옵니다.

4. 이벤트 구독 취소 구현

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);
  }
 }

전체 코드:

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);
     }
    }
   }
  }
 }

5. 테스트

/* Pubsub */
 function Pubsub(){
  //存放事件和对应的处理方法
 this.handles = {};
 }
 Pubsub.prototype={
  //传入事件类型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);
   }
  },
  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);
      }
     }
    }
   }
  }
 }

위의 관찰자 패턴 JavaScript 네이티브 구현 예는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 또한 PHP 중국어 웹사이트도 활용해보시길 바랍니다.

관련 추천:

JavaScript 관찰자 패턴 정의 및 DOM 이벤트 인스턴스에 대한 자세한 설명

javascript 관찰자 패턴 정의, 장면 인스턴스 코드에 대한 자세한 설명

JavaScript 원리 분석 관찰자 패턴, 함수

위 내용은 관찰자 Pattern_javascript 기술의 JavaScript 기본 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!