ts案例-观察者

ts案例-观察者(事件执行的流程)

//main.ts
//创建进行侦听目标对象
var target: EmitterTarget = new EmitterTarget();
//调用addEventListener方法 传入参数
//"click"-->type  clickHandler-->callback
target.addEventListener("click", clickHandler1)
target.addEventListener("click", clickHandler2)
target.addEventListener("keydown", keyHandler1)
target.addEventListener("keydown", keyHandler2)

//创建事件
var evt: Emitter = new Emitter("click")
//调用dispatchEvent方法 让目标对象抛发事件
target.dispatchEvent(evt);

var evt1: Emitter = new Emitter("keydown");
target.dispatchEvent(evt1)

//使用clickHandler函数
function clickHandler1(this: void, e: Emitter): void {
  console.log(e)
}
function clickHandler2(this: void, e: Emitter): void {
  console.log(e)
}
function keyHandler1(this: void, e: Emitter): void {
  console.log(e)
}
function keyHandler2(this: void, e: Emitter): void {
  console.log(e)
}

//Emitter.ts
//Emitter-->Event(事件)

//事件类
export default class Emitter {
  //可以暴露的只读type
  public constructor(public readonly type: string) {

  }
}

//EmitterTarget.ts
// EmitterTarget-->EventTarget(目标对象)
import Emitter from "./Emitter.js";

//事件中的那个回调函数接口
interface IHandler {
  (e: Emitter): void;
}

//获取到的事件对象接口
//对象的属性是string类型
//对象的值是Set<IHandler>集合 集合中的值是IHandler类型
interface IHandlerList {
  [key: string]: Set<IHandler>
}

export default class EmitterTarget {
  //定义私有的事件对象属性
  //list中存的是Set集合
  private list: IHandlerList = {};
  constructor() {

  }
  //type:string 传入的事件类型
  //callback:IHandler 目标对象侦听时的回调函数
  public addEventListener(type: string, callback: IHandler): void {
    //this指向当前类EmitterTarget
    //this.list 是上面定义的对象
    //this.list[type] 是Set集合

    //若是对应的事件函数不存在，则实例化出一个新的
    if (!this.list[type]) this.list[type] = new Set();
    //否则直接加入到set集合里
    // console.log(callback)
    this.list[type].add(callback);
  }
  public removeEventLister(type: string, callback: IHandler): void {
    //若没有集合了就跳出
    if (!this.list[type]) return;
    //判断set集合中是否存在传入的事件函数
    if (this.list[type].has(callback))
      this.list[type].delete(callback);
  }
  public dispatchEvent(evt: Emitter): void {
    //evt-->事件
    //evt.type-->事件名
    //this.list[evt.type]中的值 是一个个事件函数
    this.list[evt.type].forEach(fn => {
      //执行fn 传入参数this 和evt(事件) 实现事件的抛发
      fn.call(this, evt);
    })
  }
}