ts发布订阅模式

旭氏美术馆

于 2024-03-13 15:46:24 发布

阅读量158

点赞数 1

分类专栏： typescript 文章标签：前端 typescript

本文链接：https://blog.youkuaiyun.com/ChenXvYuan_001/article/details/136682397

版权

typescript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在TypeScript中使用发布订阅模式创建一个可复用的事件系统，包括定义接口、创建Emitter类以及处理不同类型的参数。示例展示了如何添加监听器和触发事件的过程。

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

Ts发布订阅模式

简单类型

interface IOnEmitter<T>{
    eventName:string;
    fn:(aegs?:T)=>void
}

interface IEmitterParams<T>{
     eventName?:string;
     params?:T
}

class Emitter<T>{

    emitterList:IOnEmitter<T>[];

    constructor(){
        this.emitterList=[]
    }

    on(onEmitter:IOnEmitter<T>){
        //去重
        this.emitterList.push(onEmitter)
    }
    
    emit(emit:IEmitterParams<T>){
        this.emitterList.forEach((item)=>{
            if(item.eventName===emit.eventName){
                item.fn(emit.params)
            }
        })
    }
}


type IParamsOftheEmitter=Record<string,any>
const theEmitter=new Emitter<IParamsOftheEmitter>()

theEmitter.on({eventName:'BARK',fn:()=>{
    console.log('bark')
}})
theEmitter.on({eventName:'HI',fn:()=>{
    console.log('hi')
}})
theEmitter.on({eventName:'OK',fn:(aegs?:IParamsOftheEmitter)=>{
    console.log('ok',aegs)
}})

theEmitter.emit({eventName:'BARK'})
theEmitter.emit({eventName:'OK',params:{name:'jack'}})



type IParamsOftheEmitter2=string
const theEmitter2=new Emitter<IParamsOftheEmitter2>()

theEmitter2.on({eventName:'WHY',fn:(aegs?:IParamsOftheEmitter2)=>{
    console.log('why',aegs)
}})
theEmitter2.emit({eventName:'WHY',params:'not'})