一个事件订阅和发布的库（onfire.js）的源码浅析

左手的ㄟ右手 2023-10-07 19:26 52阅读 0赞

#### 文章目录 ####

*  一、onfire.js介绍
 *  二、API介绍
 *  三、变量浅析
 *  四、订阅函数浅析
 *  五、发布函数浅析
 *  六、全部源码

## 一、onfire.js介绍 ##

> 一个简单实用的事件订阅和发布的库。

> [onfire.js 的 github地址][onfire.js _ github]

## 二、API介绍 ##

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>on(eventName, callback, context)</code></td> 
   <td>订阅<code>eventName</code>事件，当事件触发时，回调<code>callback</code></td> 
  </tr> 
  <tr> 
   <td><code>one(eventName, callback, context)</code></td> 
   <td>订阅<code>eventName</code>事件，当事件触发时，只回调一次<code>callback</code></td> 
  </tr> 
  <tr> 
   <td><code>fire(eventName)</code></td> 
   <td>异步触发<code>eventName</code>事件，将数据发送给回调函数</td> 
  </tr> 
  <tr> 
   <td><code>fireSync(eventName)</code></td> 
   <td>同步触发<code>eventName</code>事件，将数据发送给回调函数</td> 
  </tr> 
  <tr> 
   <td><code>un(event)</code></td> 
   <td>取消<code>event</code>事件订阅</td> 
  </tr> 
  <tr> 
   <td><code>clear()</code></td> 
   <td>取消所有事件订阅</td> 
  </tr> 
 </tbody> 
</table>

## 三、变量浅析 ##

事件列表

var __onfireEvents = {
        },

## 四、订阅函数浅析 ##

*  `on`和`one`函数基本相似，都是通过调用`_bind`函数实现
 *  不同的地方在于`_bind`函数的第三个参数，实现订阅N次，还是只订阅1次

function on(eventName, callback, context) {
        
        return _bind(eventName, callback, 0, context);
      }

function one(eventName, callback, context) {
        
        return _bind(eventName, callback, 1, context);
      }

*  `_bind`函数先判断`__onfireEvents`事件队列中是否已经含有`eventName`事件了
 *  `eventName`作为`__onfireEvents`事件队列的索引，存入`callback`和`is_one`

## 五、发布函数浅析 ##

*  `fire`和`fireSync`基本相似，都是通过调用`_fire_func`函数实现
 *  不同的地方在于`fire`通过`setTimeout`方法实现异步执行，而`fireSync`是同步执行，会堵塞后续的函数

function fire(eventName) {
        
        // fire events
        var args = slice(arguments, 1);
        setTimeout(function () {
        
          _fire_func(eventName, args);
        });
      }

function fireSync(eventName) {
        
        _fire_func(eventName, slice(arguments, 1));
      }

*  `_bind`函数先判断`__onfireEvents`事件队列中是否含有`eventName`事件
 *  然后遍历`__onfireEvents`事件队列，执行回调函数
 *  根据`is_one`，决定是否执行后，从`__onfireEvents`事件队列中删除该`eventName`事件

## 六、全部源码 ##

/**
      Copyright (c) 2016 hustcc http://www.atool.org/
      License: MIT 
      https://github.com/hustcc/onfire.js
    **/
    /* jshint expr: true */ 
    !function (root, factory) {
        
      if (typeof module === 'object' && module.exports)
        module.exports = factory();
      else
        root.onfire = factory();
    }(typeof window !== 'undefined' ? window : this, function () {
        
      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 = {
        };
      }
      return {
        
        on: on,
        one: one,
        un: un,
        fire: fire,
        fireSync: fireSync,
        clear: clear
      };
    });

***觉得好，就一键三连呗（点赞+收藏+关注）***

[onfire.js _ github]: https://github.com/hustcc/onfire.js