zoukankan      html  css  js  c++  java
  • pubSub-js观察者模式订阅触发实现原理

    先上实现代码:

    function PubSub() {
        this.handlers = {};
    }
    PubSub.prototype = {
      // 订阅事件(定义的key值,绑定的函数)
      on: function(eventType, handler){
        var self = this;
        if(!(eventType in self.handlers)) {
          self.handlers[eventType] = [];
        }
        self.handlers[eventType].push(handler);
        return this;
      },
       // 触发事件(定义的key值) 后一个参数建议传递对象
      emit: function(eventType){
        var self = this;
        var handlerArgs = Array.prototype.slice.call(arguments,1);//触发传递的数据
        for(var i = 0; i < self.handlers[eventType].length; i++) {
         self.handlers[eventType][i].apply(self,handlerArgs);//将传过来的对象绑定于函数中 apply立即执行
        }
        return self;
      },
      // 删除订阅事件(定义的key值,绑定的函数(一般传个函数变量))
      off: function(eventType, handler){
        var currentEvent = this.handlers[eventType];//返回PubSub被绑定的函数
        var len = 0;
        if (currentEvent) {
          len = currentEvent.length;
          for (var i = len - 1; i >= 0; i--){
            if (currentEvent[i] === handler){
              currentEvent.splice(i, 1);//PubSub对象中的函数被删除 splice用于删除项目
            }
          }
        }
        return this;
      }
    }
    on订阅事件,可将事件传入到PubSub对象的handlers对象中。
    emit触发事件,将传入的对象绑定到订阅的函数中,apply改变传入的参数的指向为指定函数,并立即执行。
    off删除订阅,将PubSub对象的指定key的事件删除。

    使用方法:

    var pubsub = new PubSub();
    //订阅事件A
    // pubsub.on('A', function(data){
    //   console.log(1, data);
    // });
    pubsub.on('A', a2=function(data){
      console.log(2 , data);
    });
    //触发事件A
    pubsub.emit('A', {a:2});
    //删除事件A的订阅源a2
    pubsub.off('A', a2);

    欢迎一起交流!
    【http://wuhairui.cnblogs.com/】

  • 相关阅读:
    Vue vue-resource三种请求数据方式pet,post,jsonp
    Vue 各个阶段生命周期函数
    Vue v-if和v-show的使用.区别
    vue v-for循环中key属性的使用
    vue v-for循环使用
    Vue 设置style属性
    Vue 设置class样式
    Vue 双向数据绑定v-model
    Vue的事件修饰符
    关于“svn: Can't connect to host '*.*.*.*': 由于连接方在一段时间后没有正确答复或连接”的解决方法
  • 原文地址:https://www.cnblogs.com/wuhairui/p/13679944.html
Copyright © 2011-2022 走看看