JavaScript实现观察者模式

首先：

观察者模式是软件设计模式的一种，它🈶️叫做发布订阅模式，它定义了一种一对多的关系，让多个观察者对象同时监听一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。它是由两类对象组成：主题和观察者，主题负责发布事件，同时观察者通过订阅这些事件来观察该主题，发布者和订阅者是完全解耦的，彼此不知道对方的存在，两者仅仅共享一个自定义事件的名称。

在Js中事件监听机制就可以理解为一种观察者模式，通过onclick进行事件绑定，然后通过交互行为进行触发或者事件主动触发。

然后这是一种实现数据双向绑定的方法。

下面给出一个Js自定义的PubSub，

定义观察者类PubSub

  function Pubsub(){
        this.handles={}
    }

实现事件订阅on

  on:function (type,handle){
        if(!this.handles[type]){
            this.handles[type]=[]
        }
        this.handles[type].push(handle);
    }
    

 实现事件发布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);
        }
    }

//Array.prototype.shift.call(arguments), arguments对象是function的内置对象，可以获取到调用该方法时传入的实参数组

shift方法取出数组中的第一个参数，就是type类型

实现事件取消订阅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);
        }
          }
      }
    }