源码分析
on
、once
、off
均可链式调用
on
- 以
type: [handler]
保存在实例中,所以同一个type
是可以绑定多个handler
once
将任务标记为一次性任务,执行一次后就会从数组中删除
off
- 如果
handler
为*
,将type
对应的所有handler
删除
delete 会将对象直接清除,而不是置 []
delete this._event_[ type ]
// undefined
- 如果是指定
handler
,将其从handlers
中删除,如果删除后的数组长度为 0,则清除
emit
- 将
handlers
中的所有handler
取出来执行,如果标记为只执行一次,执行完成后将其从数组中删除
for ( let handler of handlers ) {
handler.apply( this, args );
if(handler._once_){
onceHandled.push(handler);
}
}
- 如果没有对应的
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;
};
}