ts案例-小球

ts案例-小球

//main.ts
import Ball from "./Ball.js"
for (var i = 0; i < 50; i++) {
  var ball: Ball = new Ball();
  ball.appendTo("body")
}

//TimeManager.ts
export interface IUpdate {
  update(): void
}

export default class TimeManager {
  //构造单例  保证当前TimeManager类只能获取为唯--个实例化对象
  private static _instance: TimeManager;
  //定义私有的事件对象属性
  private list: Set<IUpdate> = new Set();
  private ids?: number;
  private constructor() {

  }

  public static get instance(): TimeManager {
    return TimeManager._instance || (TimeManager._instance = new TimeManager());
  }


  //观察者模式
  public add(item: IUpdate): void {
    this.list.add(item);
    //item-->div
    //若集合的长度不为0 或者 ids还存在 说明还有谁目标对象存在
    if (this.list.size > 0 && !this.ids)
      this.ids = setInterval(() => this.dispatch(), 16)
  }
  public remove(item: IUpdate): void {
    //若没有集合了就跳出
    if (!this.list.has(item)) return;
    //否则就是存在 进行删除
    this.list.delete(item);
    if (this.list.size === 0 && this.ids) {
      clearInterval(this.ids);
      this.ids = undefined;
    }
  }
  public dispatch(): void {
    this.list.forEach((item: IUpdate) => item.update());
  }
}

//Ball.ts
import TimeManager, { IUpdate } from "./TimeManager.js";
export default class Ball implements IUpdate {
  private elem: HTMLDivElement;
  private x: number = Math.random() * 500;
  private y: number = Math.random() * 500;
  private bool: boolean = false;
  constructor() {
    this.elem = document.createElement("div");
    Object.assign(this.elem.style, {
      width: "100px",
      height: "100px",
      borderRadius: "50px",
      position: "absolute",
      left: 0,
      right: 0,
      backgroundColor: "red"
    })
    this.elem.addEventListener("click", e => this.clickHandler(e))
  }

  public appendTo(parent: string | HTMLElement): void {
    if (typeof parent === "string") parent = document.querySelector(parent) as HTMLElement;
    if (parent && parent instanceof HTMLElement) parent.appendChild(this.elem);
  }

  public clickHandler(e: MouseEvent): void {
    // console.log(this) //this是当前点击的div 即实例化对象
    this.bool = !this.bool;
    if (this.bool) {
      TimeManager.instance.add(this);
    } else {
      TimeManager.instance.remove(this)
    }
  }
  public update(): void {
    this.x++;
    this.y++;
    this.elem.style.left = this.x + "px";
    this.elem.style.top = this.y + "px";
  }
}