Example of JavaScript native implementation of observer pattern

Example of JavaScript native implementation of observer pattern_javascript skills

韦小宝

Release： 2017-12-15 13:27:31

Original

1191 people have browsed it

The following editor will share with you an example of JavaScript native implementation of the observer pattern, JavaScript source code, if you are interested in JavaScript, follow the editor to have a look

The observer pattern is also called publish and subscribe Pattern, which defines a one-to-many relationship that allows multiple observer objects to monitor a certain topic object at the same time. When the status of this topic object changes, all observing objects will be notified. It is composed of two types of objects, topics and observers. The topic is responsible for publishing events, and the observer observes the subject by subscribing to these events. The publisher and the subscriber are completely decoupled and do not know the existence of the other. Just share the name of a custom event.

In Nodejs, native support for this mode is implemented through EventEmitter.

The event listening mechanism in JavaScript can be understood as an observer pattern. Bind the event through onclick, and then trigger it through interactive behavior or actively trigger the event.

The following is a JS-customized PubSub. Reading the following code carefully will help you understand the observer pattern.

1. Define the observer class Pubsub

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

Copy after login

2. Implement event subscription on

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

Copy after login

3 , implement event release emit

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

Copy after login

What needs to be explained is Array.prototype.shift.call(arguments) In this code, the arguments object is a built-in object of function, and you can get the actual parameter group passed in when calling the method.

The shift method takes out the first parameter in the array, which is the type type.

4. Implement event unsubscription off

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

Copy after login

##Full code:

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

Copy after login

5. Test

var p1 = new Pubsub();
 p1.on(&#39;mm&#39;, function (name) {
 console.log(&#39;mm: &#39;+ name);
 });
 p1.emit(&#39;mm&#39;,&#39;哈哈哈哈&#39;);
console.log(&#39;===============&#39;);
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log(&#39;mm2: &#39;+ name);
 };
 var fn2 = function (name) {
 console.log(&#39;mm222: &#39;+ name);
 };
 p2.on(&#39;mm2&#39;, fn);
 p2.on(&#39;mm2&#39;, fn2);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);
p2.off(&#39;mm2&#39;, fn);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);
p2.off(&#39;mm2&#39;);
 p2.emit(&#39;mm2&#39;,&#39;哈2哈2哈2哈2&#39;);
 console.log(&#39;-------------&#39;);

Copy after login

The above example is an example of JavaScript native implementation of the observer pattern. This is all the content that the editor has shared with you. I hope it can give you a reference, and I also hope you can use PHP Chinese website.

Related recommendations:

Detailed explanation of JavaScript observer pattern definition and dom event instances

javascript observer pattern definition, detailed explanation of scene instance code

Analysis of the principles and functions of the javascript observer pattern

The above is the detailed content of Example of JavaScript native implementation of observer pattern_javascript skills. For more information, please follow other related articles on the PHP Chinese website!