TypeScript实现Vue数据变化监听原理（观察者模式）

系统管理员 2021-01-19 14:47 1220阅读 0赞

class Common { 
      private _observers: Array<Observer> = new Array<Observer>()
      private _myData: string
    
      get observers(): Array<Observer> { 
        return this._observers
      }
    
      set observers(value: Array<Observer>) { 
        this._observers = value
      }
    
      get myData(): string { 
        return this._myData
      }
    
      set myData(value: string) { 
        this._myData = value
        this.notifyAllObservers()
      }
    
      attach(observer: Observer): void { 
        this.observers.push(observer)
      }
    
      notifyAllObservers(): void { 
        this._observers.forEach(item => { 
          item.update()
        })
      }
    }
    
    abstract class Observer { 
      constructor(common: Common) { 
        this.common = common
      }
    
      common: Common
    
      abstract update(): void
    }
    
    class FirstCommon extends Observer { 
    
      constructor(common: Common) { 
        super(common)
        common.attach(this)
      }
    
      update(): void { 
        console.log('FirstCommon组件监听到了数据改变：', this.common.myData)
      }
    }
    
    class SecondCommon extends Observer { 
      constructor(common: Common) { 
        super(common)
        common.attach(this)
      }
    
      update(): void { 
        console.log('SecondCommon组件监听到了数据改变：', this.common.myData)
      }
    }
    
    class Test { 
    
      constructor() { 
        let common = new Common()
        //组件1监听
        new FirstCommon(common)
        //组件2监听
        new SecondCommon(common)
        //测试修改数据
        common.myData = '测试文字'
    
      // 输出结果：
      // FirstCommon组件监听到了数据改变：测试文字
      // SecondCommon组件监听到了数据改变：测试文字
      }
    }
    
    new Test()