事件观察者模式详解-优快云博客

事件观察者的应用

事件观察者又可以叫事件委托、订阅模式，目的是为了解偶，定义了一种一对多的关系，当事件变化时通知与此事件依赖的对象，并做出相应的处理。应用时非常广的，我在做游戏中时必定用到的，是最最基础的模块，数据更新、玩家动作触发、帧频刷新、服务器消息响应、界面与逻辑分离、状态变迁等等。我在理解观察者模式的基础上作出了一些改动，使用起来会更方便与快捷。

事件观察者

首先，事件观察者监听事件，然后当收到事件触发时，调用事件响应函数，完成一次事件的变迁。
那么，事件观察者内部会存在一个事件列表来维护事件绑定，即为 eventMap ，其中key是唯一值是事件ID，通过区分事件ID来划分事件监听函数。

一个事件ID对应多个响应事件
事件ID不可重复
同一个事件ID的事件响应函数不可重复。

事件列表中的每一个元素可以包涵4个元素，我使用TypeScript实现整个类。

eventID 事件ID
callback 事件响应函数
thisObj 作用域指针
once 是否触发一次

定义 EventDispatcher 类

module app {
    export class EventDispatcher {
        private _eventMap: any = {};

        public static create(): app.EventDispatcher {
            var instance = new app.EventDispatcher();
            return instance;
        }
    }
}

定义 on、once 监听函数

on 函数只要不移除事件，只要事件触发就会响应。
once 函数只监听一次事件，事件触发一次后就会移除。

public on(eventID: any, callback: Function, thisObj?: any): EventDispatcher {
    this.addEventListener(eventID, callback, thisObj);
    return this;
}

public once(eventID: any, callback: Function, thisObj?: any): EventDispatcher {
    this.addEventListener(eventID, callback, thisObj, true);
    return this;
}

public has(eventID: any, callback: Function, thisObj?: any): boolean {
    return this.hasEventListener(eventID, callback, thisObj);
}

private addEventListener(eventID: any, callback: Function, thisObj: any, once: boolean = false): void {
    if (this.hasEventListener(eventID, callback, thisObj)) return console.log('repeat add Event');
    var list: Array<any> = this._eventMap[eventID];
    if (!list) {
        list = [];
        this._eventMap[eventID] = list;
    }
    list.push({ eventID: eventID, callback: callback, thisObj: thisObj, once: once });
}

private hasEventListener(eventID: any, callback: Function, thisObj: any): boolean {
    var list: Array<any> = this._eventMap[eventID];
    if (!list) return false;
    var len: number = list.length;
    for (var idx = 0; idx < len; idx++) {
        var eventData = list[idx];
        if (eventData &&
            eventData.callback === callback &&
            eventData.thisObj === thisObj) {
            return true;
        }
    }
    return false;
}

定义 off、offAll、offTarget 移除函数

off 函数接受事件ID、响应函数、作用域，根据这三个参数来确定移除哪个响应
offAll 函数接受事件ID 时移除指定事件ID的所有响应函数列表，如果不传值，则删除所有的响应函数。
offTarget 函数接受对象指针，通过对象删除所有监听

public off(eventID: any, callback: Function, thisObj?: any): EventDispatcher {
    this.removeEventListener(eventID, callback, thisObj);
    return this;
}

public offAll(eventID?: any): EventDispatcher {
    if (eventID) {
        delete this._eventMap[eventID];
    }
    else {
        this._eventMap = {};
    }
    return this;
}

public offTarget(target: any): EventDispatcher {
    this.removeEventListenerByTarget(target);
    return this;
}

private removeEventListener(eventID: any, callback: Function, thisObj: any): void {
    var list: Array<any> = this._eventMap[eventID];
    var len: number = list.length;
    for (var idx = 0; idx < len; idx++) {
        var eventData = list[idx];
        if (eventData &&
            eventData.callback === callback &&
            eventData.thisObj === thisObj) {
            list.splice(idx, 1);
            break;
        }
    }
}

private removeEventListenerByTarget(thisObj: any): void {
    for (var key in this._eventMap) {
        var list: Array<any> = this._eventMap[key];
        this._eventMap[key] = list.filter(function (value): boolean {
            return !(value.thisObj === thisObj);
        }, this);
    }
}

定义 emit 函数

emit 函数接受事件ID、传递参数数据。
通过循环遍历依次响应事件列表，如果是once则响应后直接删除。

emit(事件, data);

public emit(eventID: any, data?: any): EventDispatcher {
    this.dispatchEvent(eventID, data);
    return this;
}

private dispatchEvent(eventID: any, data?: any): void {
    var list: Array<any> = this._eventMap[eventID];
    if (!list) return;
    var cloneList: Array<any> = list.slice(0);
    var len: number = cloneList.length;
    for (var idx = 0; idx < len; idx++) {
        var eventData = cloneList[idx];
        eventData.once && this.removeEventListener(eventID, eventData.callback, eventData.thisObj);
        eventData.callback.call(eventData.thisObj, data);
    }
}

扩展定义 all 函数

all 函数接受一个事件ID列表，目的是当函数列表内的所有函数都触发后，才触发响应函数。
这里使用了闭包，通过包内作用域，调用 once 函数监听及收集数据并响应函数。

all([ 事件1，事件2，事件3 ], callback, thisObj);

public all(events: any[], callback: Function, thisObj?: any): EventDispatcher {
    if (!events || events.length == 0 || !callback) throw 'events or callback is null!'
    let proxy = this;
    let datas: any = {};
    let eventsClone = events.concat();
    eventsClone.forEach(function (item) {
        proxy.once(item, function (data) {
            datas[item] = data;
            eventsClone.shift();
            if (eventsClone.length == 0) {
                setTimeout(function () {
                    callback.call(thisObj, datas);
                }, 0);
            }
        }, null);
    }, this);
    return this;
}

插件 plugin 模式

以上定义的函数满足事件观察者的所有特性，也作出了一些写法上的处理如链式调用，使代码更加优雅。
但是为了功能及便捷，没有永远适合的处理，因此我又加上了 plugin 模式，意思就是 EventDispatcher 可以作为另一个 EventDispatcher 子节点，当父节点的事件触发时，可以向下继续处理子节点的事件响应，直到处理完毕。

定义pluginMap收集所有的子节点
定义EventDispatcher的唯一索引为Key
避免子节点与父节点重复，造成死循环。

module app {
    export class EventDispatcher {
        private static EventDispatcher_Hashid: number = 1;
        public hashid: number = EventDispatcher.EventDispatcher_Hashid++;
        private _pluginMap: any = {};
        private _eventMap: any = {};

        public static create(): app.EventDispatcher {
            var instance = new app.EventDispatcher();
            return instance;
        }

        public plugin(ed: EventDispatcher): EventDispatcher {
            if (!ed) throw 'plugin is null'
            if (!this._pluginMap[ed.hashid])
                this._pluginMap[ed.hashid] = ed;
            return this;
        }

        public unplugin(ed: EventDispatcher): EventDispatcher {
            if (this._pluginMap[ed.hashid]) {
                delete this._pluginMap[ed.hashid];
            }
            return this;
        }

        public unplugins(): EventDispatcher {
            this._pluginMap = {};
            return this;
        }

        //修改后的 dispatchEvent 函数
        private dispatchEvent(eventID: any, data?: any): void {
            var list: Array<any> = this._eventMap[eventID];
            if (!list) return;
            var cloneList: Array<any> = list.slice(0);
            var len: number = cloneList.length;
            for (var idx = 0; idx < len; idx++) {
                var eventData = cloneList[idx];
                eventData.once && this.removeEventListener(eventID, eventData.callback, eventData.thisObj);
                eventData.callback.call(eventData.thisObj, data);
            }
            //增加插件的继续处理
            var list = [];
            for (var key in this._pluginMap) {
                list.push(this._pluginMap[key]);
            }
            list.forEach(function (ed) {
                ed.emit(eventID, data);
            }, this);
        }
    }
}

只要子节点监听了与父节点相同的事件，父节点触发事件，子节点也会响应。

var ed1 = EventDispatcher.create();
ed1.on('event1',callback1,this);
var ed2 = EventDispatcher.create();
ed2.on('event1',callback2,this);
ed1.plugin(ed2);
ed1.emit('event1');//ed2 同样会触发 event1 事件
ed2.emit('event1');//ed1 不会触发 event1 事件

到此为止，事件观察者的功能已经挺完善的了，但是需求时在变更的，如果有更好更便捷更有趣的功能，会继续加上！?