应届生都会的设计模式之观察者模式

• 定义：

  • 观察者模式 定义对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，全部依赖它的对象都将获得通知。
  • 事实上，只要你曾经在DOM节点上绑定过事件函数，那么你就曾经使用过观察者模式了。
  • 解释说明：做为观察者你，订阅了一些消息，被观察者在有消息的时候就会通知你，而且把消息给到你，这个模式存在的意义就是解耦，被观察者无需关心你如何处理消息。

• 事件机制自己就是一种观察者模式

• 观察者的使用场景就是：

  • 当一个对象的改变须要同时改变其余对象，而且它不知道具体有多少对象须要改变的时候，就应该考虑使用观察者模式。
  • 关注公众号
  • 订阅杂志

• 实现一个Event模块

  • 发布消息
  • 订阅消息
  • 退订消息

• 源码实现

  // Event事件模块
  function Event() {
    // 存储不一样的事件类型对应不一样的处理函数 保证后续emmit能够执行
    this.cache = [];
  }
  // 绑定自定义事件模块
  Event.prototype.on = function(type, handle) {
    if(!this.cache[type]) {
        this.cache[type] = [handle];
    }else {
        this.cache[type].push(handle);
    }
  }
  // 自动触发事件的功能
  Event.prototype.emmit = function() {
    // 没有保证参数是多少个 就用arguments
    
    // 事件类型
    var type = arguments[0];
    // 绑定函数
    var arg = [].slice.call(arguments, 1);
    for(var i = 0; i < this.cache[type].length; i++) {
        this.cache[type][i].apply(this, arg);
        // 检查是否有标记
        if(this.cache[type][i].flag) {
            this.cache[type].splice(i, 1);
        }
    }
  }
  // 所有清除绑定
  Event.prototype.empty = function(type) {
    this.cache[type] = [];
  }
  // 清除自定义事件的功能
  Event.prototype.remove = function(type, handle) {
    this.cache[type] = this.cache[type].filter(function(ele) {
        return ele != handle;
    })
  }
  // 只触发一次事件的功能
  Event.prototype.once = function(type, handle) {
    if(!this.cache[type]) {
        this.cache[type] = [];
    }
    // 作标记
    handle.tag = 'true';
    this.cache[type].push(handle);
  }
    
  var oE = new Event();
  function deal1(time) {
    console.log('overtime1:' + time);
  }
  oE.on('over', deal1);
  function deal2(time) {
    console.log('overtime2:' + time);
  }
  oE.on('over', deal2);
    
  oE.emmit('over', '2018-9-25');
  oE.remove('over', deal2);
  oE.emmit('over', 'second-1-1');
  复制代码

你的点赞是我持续输出的动力 但愿能帮助到你们 互相学习 有任何问题下面留言 必定回复