typescript事件通知机制

PS: 本文参考PureMVC

用到的模式是观察者模式,本来是自己想要一个事件通知机制,刚好看到pureMVC,于是单独把里面的事件通知剥离出来单独用,只有静态的方法,如果你想要考虑复用的话, 可以把静态改掉。代码如下

emitter.ts代码如下

/**
 * 事件
 */
export class Emitter {
    /** 监听数组 */
    private static listeners = {};

    /** 
     * 注册事件
     * @param name 事件名称
     * @param callback 回调函数
     * @param context 上下文
     */
    public static register(name: string, callback: Function, context: any) {
        let observers: Observer[] = Emitter.listeners[name];
        if (!observers) {
            Emitter.listeners[name] = [];
        }
        Emitter.listeners[name].push(new Observer(callback, context));
    }

    /**
     * 移除事件
     * @param name 事件名称
     * @param callback 回调函数
     * @param context 上下文
     */
    public static remove(name: string, callback: Function, context: any) {
        let observers: Observer[] = Emitter.listeners[name];
        if (!observers) return;
        let length = observers.length;
        for (let i = 0; i < length; i++) {
            let observer = observers[i];
            if (observer.compar(context)) {
                observers.splice(i, 1);
                break;
            }
        }
        if (observers.length == 0) {
            delete Emitter.listeners[name];
        }
    }

    /**
     * 发送事件
     * @param name 事件名称
     */
    public static fire(name: string, ...args: any[]) {
        let observers: Observer[] = Emitter.listeners[name];
        if (!observers) return;
        let length = observers.length;
        for (let i = 0; i < length; i++) {
            let observer = observers[i];
            observer.notify(name, ...args);
        }
    }
}

/**
 * 观察者
 */
class Observer {
    /** 回调函数 */
    private callback: Function = null;
    /** 上下文 */
    private context: any = null;

    constructor(callback: Function, context: any) {
        let self = this;
        self.callback = callback;
        self.context = context;
    }

    /**
     * 发送通知
     * @param args 不定参数
     */
    notify(...args: any[]): void {
        let self = this;
        self.callback.call(self.context, ...args);
    }

    /**
     * 上下文比较
     * @param context 上下文
     */
    compar(context: any): boolean {
        return context == this.context;
    }
}

测试代码:

import {Emitter} from "./emitter";
class Test{
    constructor(){
        let self = this;
        Emitter.register("nihao", self.test, self);
    }

    public test(eventName:string, args1:string, args2:number){
        console.log(eventName, args1, args2);
        console.log(arguments);
    }
}

let a = new Test();
Emitter.fire("nihao", "cyrwpj", 1);

参数是不定的,需要什么传什么。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值