设计思想

对于观察者模式第一可能想到的是VUE的双向绑定原理，运用observe对数据的劫持和getter绑定，当检测数据变动之后setter出去通过。通过对数据的观察从而实现高效的数据双向绑定。以上的描述同时引出了Observer行为模式之一，它的作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态。
在此之前需要我们对一些事物进行订阅，目前很多得设计模式都是有基于观察值模式，例如promise的实现、以及Dom和js的操作，设计前期我们先设定一些已知的时间，这样大大减少了耦合性，如果后期有新的需求只需要再往其中加入一些方法即可。话不多少让我们操练起来！！！！

具体的思想方式

class ObservTest {
  constructor() {
    this.AllThings = {};
  }

  <!--创建订阅者，对事件先进行订阅-->
  on(eventType,things) {
    if (!this.AllThings.hasOwnProperty(eventType)) {
        this.AllThings[eventType] = []
    }
    if (typeof things == 'function') {
        this.AllThings[evntType].push(things)
    } else {
        alert('缺回调函数')
    }
    return this
  }

  <!--事件发布-->
  emit(eventType, ...args) {
      if (this.AllThings.hasOwnProperty(eventType)) {
          this.AllThings[eventType].forEach((item, key, arr) => {
              item.apply(null, args)
          })
      } else {
          alert('事件未注册')
      }
      return this
  }

 <!--执行删除操作-->
  delete(eventType, things) {
    if (!this.AllThings.hasOwnProperty(eventType)) {
      alert(`事件未注册`);
    } else if (typeof things != 'function') {
      alert('缺少回调函数');
    } else {
      this.AllThings[eventType].forEach((item, key, arr) => {
        if (item == things) {
          arr.splice(key, 1);
        }
      })
    }
    return this; 
  }
}

参考示例

<!--先订阅一个事件-->
var AllThings = new AllThings()
ObservTest.on('test', (...args) => {
    console.log(args.join('||'))
})
ObserverTest.emit('test', 'A', 'is', 'B')

//执行结果
A || is || B

以此类推如果我们后期有需要进加入的功能需求，则只需要添加即可，大大减少了代码的耦合性，优化完整度也比较高。

直接了当的JS观察者模式

设计思想

具体的思想方式