## :-: 观察者模式 ### 观察者模式 **观察者模式指的是一个对象（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(); ``` ### 发布订阅模式