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/】

  • 相关阅读:
    Spring MVC与JAX-RS比较与分析
    JDK历史版本下载
    第六篇:为多态基类声明虚析构函数
    第五篇:明确拒绝不想编译器自动生成的拷贝构造函数和赋值运算符重载函数
    第四篇:了解 C++ 默默编写并调用的函数
    第三篇:确保对象在被使用前的初始化
    poj 2125(最小割)
    hdu 4704(费马小定理)
    hdu 4705(树形DP)
    poj 3469(网络流模版)
  • 原文地址:https://www.cnblogs.com/wuhairui/p/13679944.html
Copyright © 2011-2022 走看看