TypeScript设计模式之观察者模式

本文聚焦TypeScript设计模式中的观察者模式,介绍其定义为对象间一对多依赖关系,状态改变时依赖对象自动更新。阐述了模式结构,包括客户端、通知者和观察者,还分析了利弊,最后给出了一个使用该模式的事件通知机制测试代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天我们来学习一下TypeScript设计模式中的观察者模式!

观察者模式:观察者模式上定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所以依赖于它的对象都得到通知并被自动更新。

观察者模式的结构

  • Client : 客户端
  • Subject: 通知者
  • Observer: 观察者

观察者模式的利弊

利:

  • 观察者和被观察者是抽象耦合的。
  • 建立一套触发机制。

弊:

  • 如果一个被观察者对象有很多的直接和间接的观察者的话,将所有的观察者都通知到会花费很多时间。
  • 如果在观察者和观察者目标之间有循环依赖的话,观察目标会触发它们之间进行循环调用,可能导致系统崩溃。

------------------------------接下来话不多说,直接上码---------------------------------

关于观察模式的例子

以下的例子是我最近在发现的一个Typescript事件通知机制,用到的模式是观察者模式:



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

    /**
     * 注册事件
     * @param name 事件名称
     * @param callback 回调函数
     * @param context 上下文
     */
    public static register(name: string, callback: Function, context: any) {
        let observers: Observer[] = Events.listeners[name];
        if (!observers) {
            Events.listeners[name] = [];
        }
        Events.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[] = Events.listeners[name];
        if (!observers) {
            return "remove";
        }
        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 Events.listeners[name];
        }
    }

    public static emit(name: string, ...args: any[]) {
        let observers: Observer[] = Events.listeners[name];
        if (!observers) {
            return "emit";
        }
        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;
    }
}

测试代码:


class Test {
    constructor () {
        Events.register("hello",this.test,self);
    }

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

let a = new Test();
Events.emit("hi","hhh",1);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值