event-pubsub 源码

·  阅读 159

源码分析

ononceoff 均可链式调用

on

  1. type: [handler] 保存在实例中,所以同一个 type 是可以绑定多个 handler

once

将任务标记为一次性任务,执行一次后就会从数组中删除

off

  1. 如果 handler*,将 type 对应的所有 handler 删除
delete 会将对象直接清除,而不是置 []
delete this._event_[ type ]
// undefined
复制代码
  1. 如果是指定 handler,将其从 handlers 中删除,如果删除后的数组长度为 0,则清除

emit

  1. handlers 中的所有 handler 取出来执行,如果标记为只执行一次,执行完成后将其从数组中删除
for ( let handler of handlers ) {
    handler.apply( this, args );
    if(handler._once_){
        onceHandled.push(handler);
    }
}
复制代码
  1. 如果没有对应的 type,会走 type* 的降级方案

为什么使用 delete 而不是直接清空?

![] 
// false
!undefined
// true
复制代码

如果只是清空,会导致如果只是一次性的 type 被多次发送时无法走降级方案。

如何匹配?

如果判断 handlers 中是否存在 handler

由于对 JS 闭包等知识了解不完全,暂略。

待完成

使用 swift 重写。

官方提供的 event bus

注册

main.js 里面在 Vue 原型上面挂载一个变量

Vue.prototype.Event = new Vue()
复制代码

订阅者

在订阅的时候,要注意及时释放,否则有可能会执行多次

// mounted 或者其他时机
this.Event.$on('xxx', () => {})
// onDestroyed 或者其他时机
this.Event.$off('xxx')
复制代码

发布者

this.Event.$emit('xxx', () => {})
复制代码

基本使用

安装

npm i --save event-pubsub
复制代码

Node

详细使用可见官方文档。

var events = new window.EventPubSub();

events.on(
    'hello',
    function(data){
        console.log('hello event recieved ', data);
        events.emit(
            'world',
            {
                type:'myObject',
                data:{
                    x:'YAY, Objects!'
                }
            }
        )
    }
);

 events.emit(
     'hello',
     'world'
 );

 events.emit(
     'hello',
     'again','and again'
 );
复制代码

源码

'use strict';

window.EventPubSub=class EventPubSub {
  constructor( scope ) {
      this._events_ = {};
      this.publish = this.trigger = this.emit;
      this.subscribe = this.on;
      this.unSubscribe = this.off;
  }

  on( type, handler, once ) {
      if ( !handler ) {
          throw new ReferenceError( 'handler not defined.' );
      }

      if ( !this._events_[ type ] ) {
          this._events_[ type ] = [];
      }

       if(once){
          handler._once_ = once;
      }

      this._events_[ type ].push( handler );
      return this;
  }

  once( type, handler ) {
      return this.on( type, handler, true );
  }

  off( type, handler ) {
      if ( !this._events_[ type ] ) {
          return this;
      }

      if ( !handler ) {
          throw new ReferenceError( 'handler not defined. if you wish to remove all handlers from the event please pass "*" as the handler' );
      }

      if ( handler == '*' ) {
          delete this._events_[ type ];
          return this;
      }

      const handlers = this._events_[ type ];

      while ( handlers.includes( handler ) ) {
          handlers.splice(
              handlers.indexOf( handler ),
              1
          );
      }

      if ( handlers.length < 1 ) {
          delete this._events_[ type ];
      }

      return this;
  }

  emit( type, ...args ) {
      if ( !this._events_[ type ] ) {
          return this.emit$( type, ...args );
      }

      const handlers = this._events_[ type ];
      const onceHandled=[];

      for ( let handler of handlers ) {
          handler.apply( this, args );
          if(handler._once_){
            onceHandled.push(handler);
          }
      }

      for(let handler of onceHandled){
        this.off(type,handler);
      }

      return this.emit$( type, ...args );
  }

  emit$( type, ...args ) {
      if ( !this._events_[ '*' ] ) {
          return this;
      }

      const catchAll = this._events_[ '*' ];

      for ( let handler of catchAll ) {
          handler.call( this, type, ...args );
      }

      return this;
  }
}

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
    'use strict';
    if (this == null) {
      throw new TypeError('Array.prototype.includes called on null or undefined');
    }

    var O = Object(this);
    var len = parseInt(O.length, 10) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1], 10) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN
        return true;
      }
      k++;
    }
    return false;
  };
}

复制代码
分类:
前端
标签: