JavaScript设计模式：观察者模式应用实例

一、观察者模式的核心价值与鸿蒙适配

1.1 模式定义与架构优势

观察者模式（Observer Pattern）作为行为型设计模式的经典代表，在JavaScript和HarmonyOS开发中展现独特价值。该模式通过定义对象间的一对多依赖关系，实现了低耦合的事件驱动架构。根据2023年华为开发者大会披露的数据，在HarmonyOS NEXT原生应用中，78%的元服务（Meta Service）都采用了观察者模式进行状态同步。

// 基础观察者模式实现

class Subject {

constructor() {

this.observers = [];

}

// 鸿蒙生态中的自由流转特性与此高度契合

subscribe(observer) {

this.observers.push(observer);

}

notify(data) {

this.observers.forEach(observer => observer.update(data));

}

}

1.2 鸿蒙生态的特殊适配需求

在HarmonyOS的分布式架构中，观察者模式需要处理跨设备事件通知。通过分布式软总线（Distributed Soft Bus）技术，我们可以实现多端设备的协同观察。以智能家居场景为例，当温度传感器（Subject）状态变化时，手机、平板、智慧屏等观察者（Observer）能同时收到通知。

二、JavaScript实现观察者模式的三种范式

2.1 基础事件总线实现

通过ES6类构建最小化实现：

class EventBus {

constructor() {

this.events = new Map();

}

// 支持鸿蒙元服务的多端注册

on(event, callback) {

if (!this.events.has(event)) {

this.events.set(event, new Set());

}

this.events.get(event).add(callback);

}

// 适配鸿蒙的异步事件机制

async emit(event, data) {

const callbacks = this.events.get(event);

if (callbacks) {

await Promise.all([...callbacks].map(cb => cb(data)));

}

}

}

2.2 基于Proxy的响应式扩展

结合HarmonyOS的arkData框架，实现状态自动同步：

const reactiveStore = new Proxy({}, {

set(target, key, value) {

target[key] = value;

eventBus.emit(key, value); // 触发鸿蒙自由流转

return true;

}

});

// 鸿蒙设备状态绑定示例

reactiveStore.temperature = 26;

// 自动触发所有观察者更新

三、HarmonyOS NEXT中的观察者模式实战

3.1 Stage模型中的事件处理

在HarmonyOS的Stage模型下，通过arkTS实现跨组件通信：

// 定义可观察对象

@Observed

class DeviceState {

status: string = 'offline';

}

// 观察者组件构建

@Component

struct StatusMonitor {

@ObjectLink device: DeviceState

build() {

Text(`设备状态: ${this.device.status}`)

.onClick(() => {

// 触发状态变更

this.device.status = 'online'

})

}

}

3.2 分布式事件处理实战

实现跨设备文件同步的完整案例：

// 主设备发布者

async function publishFileUpdate(filePath) {

const payload = await fs.readFile(filePath);

distributedEventManager.publish('fileUpdate', {

path: filePath,

content: payload,

timestamp: Date.now()

});

}

// 从设备订阅者

distributedEventManager.subscribe('fileUpdate', (event) => {

arkData.saveToDB(event.path, event.content);

showToast(`${event.path} 已同步`);

});

四、性能优化与多端部署策略

4.1 事件处理性能对比

4.2 一次开发多端部署技巧

通过arkUI-X框架实现代码复用：

// 统一事件处理接口

function setupObservers() {

if (isMobile()) {

setupMobileGestures();

} else if (isWatch()) {

setupWatchSensors();

}

// 核心观察者逻辑保持统一

coreObserver.subscribe(data => {

updateAllDevices(data);

});

}

JavaScript, 观察者模式, HarmonyOS NEXT, arkTS, 元服务开发, 分布式架构, 鸿蒙生态课堂