## :-: 觀察者模式 ### 觀察者模式 **觀察者模式指的是一個對象（Subject）[被觀察者]維持一系列依賴于它的對象（Observer）[觀察者]，當有關狀態發生變更時 Subject 對象則通知一系列 Observer 對象進行更新。** #### 定義被觀察者 ``` /** * 觀察者模式 一個被觀察者去維護一組觀察者， * 被觀察者擁有添加， 移除觀察者的能力 ，并有權利向這一組觀察者發布廣播消息 * 觀察者有更新狀態的數據的能力 */ /** * 被觀察者 */ export class Subject { private observers: Array<any>; constructor() { this.observers = [] } /** * 添加觀察者 */ public addObserver(observer:any): void { this.observers.push(observer); } /** * 移除觀察者 */ public removeObserver(observer:any): void { const observers = this.observers; for(let i = 0;i < observers.length;i++){ if(observers[i] === observer){ observers.splice(i,1); } } } /** * 這是發布消息 */ public notify():void { const observers = this.observers; // 廣播數據 執行所有觀察者的更新方法 for(let i = 0;i < observers.length;i++){ observers[i].update(); } } } /** * 編譯視圖 */ export class DocumentRender { private doc: any; constructor(doc: any, state: any) { this.doc = doc; } public renderApp(state: Object): string { let str: string = ''; console.log( state) return str } } /** * 更新編譯數據 * 觀察者 */ export class Observer { private state: State; constructor(state: State) { this.state = state } public update(): void { console.log('數據中的name變了' + this.state.name); console.log('數據中的name變了' + this.state.age); console.log('數據的sex變了' + this.state.sex); } } /** * 規范數據類型 */ export interface State { name?: string, age?: number, sex?: string, } ``` #### 模擬數據變更 ``` import { DocumentRender, Subject, Observer, State } from './moduls/Observer' const subject = new Subject(); const observer2 = new Observer({name: 'LiLi',age:22,sex:'女'}); setTimeout(()=> { const observer1 = new Observer({name:'marvin',age:20,sex:'男'}); subject.addObserver(observer1); subject.notify(); },2000); subject.addObserver(observer2); subject.notify(); ``` ### 發布訂閱模式