디자인 모드 가 TypeScript 에서 의 응용 - 관찰자 모드

//    
class Subject {
  //     ，        ，       
  private observers: Observer[] = new Array()
  private state: number

  //      
  public subscribe (observer: Observer): void {
    this.observers.push(observer)
  }

  //     ，     
  public setState(state: number): void {
    console.log(`Warning: State changed: ${state}`)
    this.state = state
    this.publish()
  }

  //     
  public getState(): number {
    return this.state
  }

  //     
  public publish (): void {
    for (let observer of this.observers) {
      observer.update()
    }
  }

  //     
  public unsubscribe (observer?: Observer): void {
    //       ，      
    if (!observer) {
      this.observers = new Array()
    } else {
      this.observers.splice(this.observers.indexOf(observer), 1)
    }
  }
}

//       
abstract class Observer {
  //      
  protected subject: Subject

  //     
  public abstract update (): void
}

class AObserver extends Observer {
  //        
  public constructor (subject: Subject) {
    super()
    this.subject = subject
    this.subject.subscribe(this)
  }

  public update() {
    console.log(`AObserver: ${this.subject.getState()}`)
  }
}

class BObserver extends Observer {
  //        
  public constructor (subject: Subject) {
    super()
    this.subject = subject
    this.subject.subscribe(this)
  }

  public update() {
    console.log(`BObserver: ${this.subject.getState()}`)
  }
}

const subject = new Subject()

const aObserver = new AObserver(subject)
const bObserver = new BObserver(subject)

console.log('========')
console.log('State change: 100')
subject.setState(100)
console.log('========')

console.log('=========')
console.log('aObserver     ')
subject.unsubscribe(aObserver)
console.log('State change: 150')
subject.setState(150)
console.log('=========')