当前位置：首页 > wzjs >正文

房地产销售额引擎优化seo

wzjs 2025/7/22 6:22:46

房地产销售额,引擎优化seo,wordpress社交链接图标,百度做公司网站需要多少钱一、模式本质观察者模式（Observer Pattern）建立对象间的一对多依赖关系，当核心对象（Subject）状态变化时，自动通知所有订阅者（Observers）。这是一种推模型的典型…

一、模式本质

观察者模式（Observer Pattern）建立对象间的一对多依赖关系，当核心对象（Subject）状态变化时，自动通知所有订阅者（Observers）。

这是一种推模型的典型实现，常用于解耦生产者和消费者。

二、核心实现（TypeScript）

// 抽象主题接口
interface Subject {addObserver(obs: Observer): void;removeObserver(obs: Observer): void;notifyObservers(): void;
}// 具体主题实现
class ConcreteSubject implements Subject {private observers: Observer[] = [];private state: number = 0;// 添加观察者时进行引用校验addObserver(obs: Observer): void {if (!this.observers.includes(obs)) {this.observers.push(obs);} else {console.warn('Observer already exists');}}// 使用过滤器避免splice索引问题removeObserver(obs: Observer): void {const initialLength = this.observers.length;this.observers = this.observers.filter(o => o !== obs);if (initialLength === this.observers.length) {console.warn('Observer not found');}}notifyObservers(): void {// 克隆数组防止迭代过程中被修改const observersCopy = [...this.observers];observersCopy.forEach(obs => obs.update(this.state));}// 业务方法触发状态变化setState(newState: number): void {this.state = newState;this.notifyObservers();}
}// 观察者接口
interface Observer {update(state: number): void;
}// 具体观察者
class ConcreteObserver implements Observer {constructor(private name: string) {}update(state: number): void {console.log(`[${this.name}] Received state update:`, state);// 这里可以触发视图更新等操作}
}

三、应用场景建议

1. 复杂表单联动验证

// 表单字段基类
abstract class FormField {private validators: Validator[] = [];addValidator(v: Validator) {this.validators.push(v);}validate() {const errors = this.validators.map(v => v.validate(this.value));return errors.filter(e => e !== null);}
}// 实际字段实现
class EmailField extends FormField {value: string = '';
}// 验证器接口
interface Validator {validate(value: any): string | null;
}// 使用示例
const emailField = new EmailField();
emailField.addValidator({validate: (value) => !/.+@.+\..+/.test(value) ? 'Invalid email' : null
});

2. WebSocket消息广播

class WebSocketManager implements Subject {private static instance: WebSocketManager;private ws: WebSocket;private observers: Observer[] = [];private constructor() {this.ws = new WebSocket('wss://api.example.com');this.ws.onmessage = (event) => {this.notifyObservers(JSON.parse(event.data));};}static getInstance(): WebSocketManager {if (!this.instance) {this.instance = new WebSocketManager();}return this.instance;}// 实现Subject接口方法...
}

3. 复杂状态管理

// 增强型状态管理
class Store<T> implements Subject {private state: T;private observers: Observer[] = [];constructor(initialState: T) {this.state = initialState;}setState(newState: Partial<T>) {this.state = { ...this.state, ...newState };this.notifyObservers();}// 支持选择器订阅subscribe(selector: (state: T) => any, callback: (value: any) => void) {const observer = {update: () => {const selected = selector(this.state);callback(selected);}};this.addObserver(observer);return () => this.removeObserver(observer);}
}

四、关键注意事项

1. 内存泄漏防护

// 使用WeakMap避免强引用
const observerMap = new WeakMap<Subject, Set<Observer>>();class SafeSubject implements Subject {constructor() {observerMap.set(this, new Set());}addObserver(obs: Observer) {observerMap.get(this)?.add(obs);}// 自动清理无效引用notifyObservers() {const observers = observerMap.get(this);if (!observers) return;for (const obs of observers) {if (typeof obs.update !== 'function') {observers.delete(obs);} else {obs.update(this.state);}}}
}

2. 批量更新优化

class BatchedSubject extends ConcreteSubject {private updateQueue = new Set<Observer>();private isBatching = false;notifyObservers() {if (this.isBatching) return;this.isBatching = true;requestAnimationFrame(() => {super.notifyObservers();this.isBatching = false;this.updateQueue.clear();});}// 重写状态更新方法setState(newState: number) {super.setState(newState);if (this.isBatching) {this.updateQueue.add(...this.observers);}}
}

3. 异步通知处理

class AsyncSubject extends ConcreteSubject {async notifyObservers() {const promises = this.observers.map(async obs => {try {await obs.update(this.state);} catch (error) {console.error('Observer error:', error);}});await Promise.allSettled(promises);}
}

五、模式对比

特性	观察者模式	发布-订阅模式
耦合程度	直接引用	通过中间层
通信方式	同步/异步	通常异步
关系复杂度	1:N	M:N
典型应用	对象状态通知	系统级别事件
内存管理难度	较高	较低

六、最佳实践建议

优先使用组合：通过构造函数注入观察者

class DataLoader {constructor(private notifier: Subject) {}async load() {try {const data = await fetchData();this.notifier.setState({ data });} catch (error) {this.notifier.setState({ error });}}
}

防御性编程：添加观察者生命周期管理

interface Observer {update(state: any): void;destroy?(): void;
}class SafeSubject {private observers = new Set<Observer>();notifyObservers() {this.observers.forEach(obs => {if (typeof obs.update === 'function') {try {obs.update(this.state);} catch (error) {console.error('Observer error:', error);if (typeof obs.destroy === 'function') {obs.destroy();this.observers.delete(obs);}}}});}
}

性能监控：添加观察者执行耗时统计

class InstrumentedSubject extends ConcreteSubject {notifyObservers() {this.observers.forEach(obs => {const start = performance.now();obs.update(this.state);const duration = performance.now() - start;if (duration > 100) {console.warn(`Slow observer: ${obs.constructor.name} took ${duration}ms`);}});}
}