javascript - 实现事件管理器EventManager,实现sub/pub机制,一个事件可以被多个订阅,每个订阅能依次收到事件消息,参考用例:
怪我咯
怪我咯 2017-04-11 12:59:14
[JavaScript讨论组]
EventManager.register("event1",function(){

  console.log("event1 triggerd");

})  
EventManager.register("event1",function(){

  console.log("event1_1 triggerd");

})  
EventManager.register("event2",function(){

  console.log("event2 triggerd");

})  

EventManager.triggerd("event1");

EventManager.triggerd("event2");

//输出结果是:
event1 triggerd
event1_1 triggerd
event2 triggerd
怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(1)
巴扎黑
function EventTarget(){
    this.handlers = {};
}
EventTarget.prototype = {
    constructor: EventTarget,

    addHandler: function(type, handler){
        if(typeof this.handlers[type] === "undefined"){
            this.handlers[type] = [];
        }

        this.handlers[type].push(handler);
    },

    fire: function(event){
        if(!event.target){ event.target = this; }

        if(this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];

            for(var i = 0, len = handlers.length; i < len; i++){
                handlers[i](event);
            }
        }
    },

    removeHanlder: function(){
        var 
            handlers = this.handlers,
            type = arguments[0],
            arg_len = arguments.length;

        if(arg_len === 1){
            if(handlers[type] instanceof Array){
                delete handlers[type];
            }
        }else if(arg_len === 2){
            if(handlers[type] instanceof Array){
                var j = 0, len = handlers[type].length; 
                for(j = 0; j < len; j++){
                    if(handlers[type][j] === arguments[1]){
                        break;
                    }
                }
                handlers[type].splice(j, 1);
            }
        }
    }
};

function Model(name, age){
    EventTarget.apply(this, arguments);

    this.name = name;
    this.age = age;
}

Model.prototype = EventTarget.prototype;

var model = new Model('gao', 26);

function test(){
    console.log('test');
}

function test2(){
    console.log('test2');
}

model.addHandler('fuck', test);
model.addHandler('fuck', test2);

model.fire({
    type: 'fuck',
    message: 'hah'
});

model.removeHanlder('fuck', test);
model.fire({
    type: 'fuck',
    message: 'hah'
});




再来一个

  var __onfireEvents = {},
   __cnt = 0, // evnet counter
   string_str = 'string',
   function_str = 'function',
   hasOwnKey = Function.call.bind(Object.hasOwnProperty),
   slice = Function.call.bind(Array.prototype.slice);

  function _bind(eventName, callback, is_one, context) {
    if (typeof eventName !== string_str || typeof callback !== function_str) {
      throw new Error('args: '+string_str+', '+function_str+'');
    }
    if (! hasOwnKey(__onfireEvents, eventName)) {
      __onfireEvents[eventName] = {};
    }
    __onfireEvents[eventName][++__cnt] = [callback, is_one, context];

    return [eventName, __cnt];
  }
  function _each(obj, callback) {
    for (var key in obj) {
      if (hasOwnKey(obj, key)) callback(key, obj[key]);
    }
  }
  /**
   *  onfire.on( event, func, context ) -> Object
   *  - event (String): The event name to subscribe / bind to
   *  - func (Function): The function to call when a new event is published / triggered
   *  Bind / subscribe the event name, and the callback function when event is triggered, will return an event Object
  **/
  function on(eventName, callback, context) {
    return _bind(eventName, callback, 0, context);
  }
  /**
   *  onfire.one( event, func, context ) -> Object
   *  - event (String): The event name to subscribe / bind to
   *  - func (Function): The function to call when a new event is published / triggered
   *  Bind / subscribe the event name, and the callback function when event is triggered only once(can be triggered for one time), will return an event Object
  **/
  function one(eventName, callback, context) {
    return _bind(eventName, callback, 1, context);
  }
  function _fire_func(eventName, args) {
    if (hasOwnKey(__onfireEvents, eventName)) {
      _each(__onfireEvents[eventName], function(key, item) {
        item[0].apply(item[2], args); // do the function
        if (item[1]) delete __onfireEvents[eventName][key]; // when is one, delete it after triggle
      });
    }
  }
  /**
   *  onfire.fire( event[, data1 [,data2] ... ] )
   *  - event (String): The event name to publish
   *  - data...: The data to pass to subscribers / callbacks
   *  Async Publishes / fires the the event, passing the data to it's subscribers / callbacks
  **/
  function fire(eventName) {
    // fire events
    var args = slice(arguments, 1);
    setTimeout(function () {
      _fire_func(eventName, args);
    });
  }
  /**
   *  onfire.fireSync( event[, data1 [,data2] ... ] )
   *  - event (String): The event name to publish
   *  - data...: The data to pass to subscribers / callbacks
   *  Sync Publishes / fires the the event, passing the data to it's subscribers / callbacks
  **/
  function fireSync(eventName) {
    _fire_func(eventName, slice(arguments, 1));
  }
  /**
   * onfire.un( event ) -> Boolean
   *  - event (String / Object): The message to publish
   * When passed a event Object, removes a specific subscription.
   * When passed event name String, removes all subscriptions for that event name(hierarchy)
  *
   * Unsubscribe / unbind an event or event object.
   *
   * Examples
   *
   *  // Example 1 - unsubscribing with a event object
   *  var event_object = onfire.on('my_event', myFunc);
   *  onfire.un(event_object);
   *
   *  // Example 2 - unsubscribing with a event name string
   *  onfire.un('my_event');
  **/
  function un(event) {
    var eventName, key, r = false, type = typeof event;
    if (type === string_str) {
      // cancel the event name if exist
      if (hasOwnKey(__onfireEvents, event)) {
        delete __onfireEvents[event];
        return true;
      }
      return false;
    }
    else if (type === 'object') {
      eventName = event[0];
      key = event[1];
      if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) {
        delete __onfireEvents[eventName][key];
        return true;
      }
      // can not find this event, return false
      return false;
    }
    else if (type === function_str) {
      _each(__onfireEvents, function(key_1, item_1) {
        _each(item_1, function(key_2, item_2) {
          if (item_2[0] === event) {
            delete __onfireEvents[key_1][key_2];
            r = true;
          }
        });
      });
      return r;
    }
    return true;
  }
  /**
   *  onfire.clear()
   *  Clears all subscriptions
  **/
  function clear() {
    __onfireEvents = {};
  }
  
  
  
  

思路都差不多,自己研究一下吧

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号