观察者模式与发布/订阅模式学习

观察者设计模式定义了对象间的一种一对多的组合关系，以便一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。

此种模式通常被用来实现事件处理系统。

关于 观察者模式和发布订阅模式可参考链接 https://www.cnblogs.com/lovesong/p/5272752.html

观察者模式定义了四种角色：抽象主题、具体主题、抽象观察者、具体观察者。

1.抽象主题（ISubject）: 该角色是一个抽象类或接口，定义了增加、删除、通知观察者对象的方法。

2.具体主题（Subject）: 该角色继承或实现了抽象主题，定义了一个集合存入注册过的具体观察者对象，在具体主题的内部状态发生改变时，给所有注册过的观察者发送通知。

3.抽象观察者（IObserver）: 该角色是具体观察者的抽象类，定义了一个更新方法。

4.具体观察者（Observer）: 该角色是具体的观察者对象，在得到具体主题更改通知时更新自身状态。

实际项目中运用的思路如下图

实现代码：

1.定义抽象主题（ISubject）

 

namespace ob {
    /**
     * 主题集合对象，发起通知器
     */
    export interface ISubject {
        
        /**
         * 添加一个观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         * @param thisObj 通知回调函数的this对象
         */
        on(notic:string|number, listener:Function, thisObj:Object);

        /**
         * 添加一次性观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         * @param thisObj 通知回调函数的this对象
         */
        once(notic:string|number, listener:Function, thisObj:Object);

        /** 
         * 发起一个通知
         * @param notic 通知主题
         * @param args 携带的参数
         */
        send(notic:string|number, ...args:any[]):void;

        /**
         * 删除一个观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         */
        off(notic:string|number, listener:Function,thisObj:Object);
    }
}

2.具体实现主题（Subject）

namespace ob {
    /**
     * 主题集合对象，发起通知器，代替派发事件
     */
    export class Subject implements ISubject{
        
        private funcMap:HashMap<string|number, NoticeList>;//根据主题存放监听事件对象

        constructor(){
            this.funcMap = new HashMap<string|number, NoticeList>();
        }

        /**
         * 添加一个观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         * @param thisObj 通知回调函数的this对象
         */
        on(notice:string|number, listener:Function, thisObj:Object):void{
            this.addNoticeData(notice, listener, thisObj);
        }

        /**
         * 添加一次性观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         * @param thisObj 通知回调函数的this对象
         */
        once(notice:string|number, listener:Function, thisObj:Object):void{
            this.addNoticeData(notice, listener, thisObj, true);
        }

        /**
         * 删除一个观察者通知
         * @param notic 通知主题
         * @param listener 通知监听回调函数
         */
        off(notice:string|number, listener:Function,thisObj:Object):void{
            let listObj = this.funcMap.get(notice);
            if(listObj){
                let dataList = listObj.dataList;
                //是否正在遍历，如果是，则进行复制
                if(listObj.isRunning){
                    listObj.dataList = dataList = dataList.concat();
                }
                let data:NoticeData;
                for(let i=0,len=dataList.length;i<len;i++){
                    data = dataList[i];
                    if(data.listener==listener && data.thisObj==thisObj){
                        dataList.splice(i,1);//在注册的时候已经保证不会有重复的，所以找到一个就删除返回
                        return;
                    }
                }
            }
        }

        /** 
         * 发起一个通知
         * @param notic 通知主题
         * @param args 携带的参数
         */
        send(notice:string|number, ...args:any[]):void{
            let listObj = this.funcMap.get(notice);
            if(listObj){
                let onceList:NoticeData[] = [];
                listObj.isRunning = true;
                for(let data of listObj.dataList){
                    data.listener.apply(data.thisObj, args);
                    if(data.isOnce){
                        onceList.push(data);
                    }
                }
                listObj.isRunning = false;
                while(onceList.length){
                    let data = onceList.pop();
                    this.off(notice, data.listener, data.thisObj);
                }
                if(listObj.dataList.length<1){//移除监听
                    this.funcMap.remove(notice);
                }
            }
        }


        /** 具体实现添加主题事件的方法 */
        private addNoticeData(notice:string|number, listener:Function, thisObj:Object, isOnce?:boolean):void{
            if(!listener || !thisObj){
                throw new Error("listener、thisObj均不能为空");//抛出错误可阻止后面代码运行
            }
            let listObj = this.funcMap.get(notice);//由事件主题获取对应的方法集合
            if(!listObj){
                //这里也可以考虑使用对象池
                listObj = new NoticeList();
                this.funcMap.put(notice, listObj);
            }
            let dataList = listObj.dataList;//该主题下所有存放的事件数据
            for(let data of dataList){//去重处理，不会有重复的事件被添加
                //必须监听方法和this相等才能决定是同一个监听
                if(data.listener==listener && data.thisObj==thisObj){
                    return;
                }
            }
            //判断该主题事件是否正在遍历中
            if(listObj.isRunning){
                //为了不影响正常的遍历，复制出一个数组来保存数据，那么遍历完的数组就会失去引用，从而被垃圾回收
                listObj.dataList = dataList = dataList.concat();
            }
            //开始实例化出一个事件对象
            let obj = new NoticeData(listener, thisObj, isOnce);
            dataList.push(obj);
        }
    }
}

在第2步中，需要用到几个类，NoticeData（存放主题数据），NoticeList（存放数据数组和遍历状态），第三个HashMap是工具来的，用对象Object封装成了常用的键值对像，具体代码如下

NoticeData.ts

namespace ob {
    export class NoticeData {
        /** 通知主题 (暂时没用到)**/
        notice:string | number;
        /** 监听函数 **/
        listener:Function;
        /** 执行域对象 **/
        thisObj:Object;
        /** 是否只执行一次就删除 **/
        isOnce:boolean;

        public constructor(listener:Function, thisObj:Object, isOnce?:boolean) {
            this.listener = listener;
            this.thisObj = thisObj;
            this.isOnce = isOnce;
        }
    }
}

NoticeList.ts

namespace ob {
    export class NoticeList {
        
        /** 存放数据的数组*/
        dataList:NoticeData[];

        /** 是否正在遍历，true为正在遍历 */
        isRunning:boolean;

        public constructor() {
            this.dataList = [];
        }
    }
}

工具类 HashMap.ts

/**
 * 用Object保存键值对，所以K应为简单数据类型，比如number，string，其他的类型Object会自动将其转化为string类型
 */
class HashMap<K,V> {

    private obj:Object;//存放数据的对象
    private length:number;

    public constructor() {
        this.obj = {};
        this.length = 0;
    }

    /**
     * 将指定的值与此映射中的指定键相关联.
     * @param key 与指定值相关联的键.key的类型应为number|string,其他类型会被冲掉
     * @param value 与指定键相关联的值.
     */
    put(key:K, value:V):void{
        let obj = this.obj;
        if(obj[key as any]){//该key不存在对应的值时，长度+1
            this.length++;
        }
        obj[key as any] = value;
    }

    /**
     * 返回此映射中映射到指定键的值.
     * @param key 与指定值相关联的键.
     * @return 此映射中映射到指定值的键，如果此映射不包含该键的映射关系，则返回 undefined （或者 null）.
     */
    get(key:K):V{
        return this.obj[key as any];
    }

    /**
     * 获取此映射的长度
     */
    size():number{
        return this.length;
    }

    /**
     * 是否为空
     */
    isEmpty():boolean{
        return this.length<1;
    }

    /**
     * 如果此映射包含指定键的映射关系，则返回 true.
     * @param key  测试在此映射中是否存在的键.
     * @return 如果此映射包含指定键的映射关系，则返回 true.
     */
    hasKey(key:K):boolean{
        if(this.obj[key as any]){
            return true;
        }
        return false;
    }

    /**
     * 返回此映射中包含的所有key值.
     * @return 包含所有key的数组
     */
    keys():K[]{
        let arr:K[] = [];
        if(this.length>0){
            let obj = this.obj;
            for(let key in obj){
                arr.push(key as any);
            }
        }
        return arr;
    }

    /**
     * 返回此映射中包含的所有value值.
     * @return 包含所有value的数组
     */
    values():V[]{
        let arr:V[] = [];
        if(this.length>0){
            let obj = this.obj;
            for(let key in obj){
                arr.push(obj[key]);
            }
        }
        return arr;
    }

    /**
     * 遍历所有映射均执行方法，方法携带的参数只包括映射的值
     */
    forEach(func:Function, thisObj:Object):void{
        let obj = this.obj;
        for(let key in obj){
            func.call(thisObj, obj[key]);
        }
    }

    /**
     * 遍历所有映射均执行方法，方法携带的参数包括映射的key, value
     */
    forKeyValue(func:Function, thisObj):void{
        let obj = this.obj;
        for(let key in obj){
            func.call(thisObj, key, obj[key]);
        }
    }

    /**
     * 删除并返回此映射中映射到指定键的值.
     * @param key 与指定值相关联的键.
     * @return 返回此映射中映射到指定值的键，如果此映射不包含该键的映射关系，则返回 undefined （或者 null）.
     */
    remove(key:K):V{
        let value = this.obj[key as any];
        if(value){
            delete this.obj[key as any];
            this.length--;
        }
        return value;
    }

    /**
     * 清除所有映射
     */
    clear(){
        this.length = 0;
        let obj = this.obj;
        for(let key in obj){
            delete obj[key];
        }
    }
}

在项目中，将Subject进行了二次封装，类似于单例，大家共用一个对象

下面是一个简单的示例：

class Test extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(e: egret.Event): void {
        let txt1 = new egret.TextField();
        txt1.size = 50;
        txt1.text = "这里是一次性事件变化的显示内容";
        this.addChild(txt1);

        let txt2 = new egret.TextField();
        txt2.size = 50;
        txt2.text = "这里是通用事件变化的显示区域";
        txt2.y = 100;
        this.addChild(txt2);

        let subject = new ob.Subject();
        subject.once("123", (p1,p2)=>{
            console.log("p1="+p1," p2="+p2);
            txt1.textColor = 0xfff000;
        },this);

        let cout = 0;
        subject.on("123", testFun, this);
        function testFun(p1,p2){
            console.log("p1="+p1," p2="+p2);
            txt2.textColor = Math.random() * 0xffffff;
            cout++;
            if(cout>10){
                subject.off("123", testFun, this);
            }
        }

        this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
            console.log("点了面板")
            subject.send("123","参数1","参数2");
        }, this);

    }
    
}

总结：在项目中，类似这种模式代替了事件机制，里面的逻辑部分就在Subject类中，外面调用时只需声明一个对象，供所有模块调用即可