理解事件驱动架构：一个简单的天气应用实例在软件开发中，设计模式是解决常见问题的优雅方案。今天，我们通过设计一个简单的天气

在软件开发中，设计模式是解决常见问题的优雅方案。今天，我们通过设计一个简单的天气应用，来学习事件驱动架构的核心模式。

什么是事件驱动架构？

事件驱动架构是一种设计方法，其中系统组件通过发送和接收事件来通信。这种方式可以使组件松耦合，提高系统的可维护性和扩展性。

我们的简单场景：天气应用

想象一个简单的天气应用，它需要：

获取用户位置
请求天气数据
显示天气信息
定时更新数据

现在，我们用事件驱动的方式来设计这个应用。

核心设计模式

1. 观察者模式

观察者模式允许对象（观察者）订阅某个事件，当事件发生时得到通知。

// 简单的事件总线
class EventBus {
  private listeners: Map<string, Function[]> = new Map();
  
  subscribe(eventName: string, callback: Function) {
    if (!this.listeners.has(eventName)) {
      this.listeners.set(eventName, []);
    }
    this.listeners.get(eventName)!.push(callback);
    
    return {
      unsubscribe: () => {
        const callbacks = this.listeners.get(eventName);
        if (callbacks) {
          const index = callbacks.indexOf(callback);
          if (index !== -1) callbacks.splice(index, 1);
        }
      }
    };
  }
  
  emit(eventName: string, data?: any) {
    const callbacks = this.listeners.get(eventName);
    if (callbacks) {
      callbacks.forEach(callback => callback(data));
    }
  }
}

2. 状态模式

状态模式让对象在内部状态改变时改变其行为。

// 天气数据状态
type WeatherStatus = "unknown" | "loading" | "loaded" | "error";

3. 中介者模式

中介者模式通过一个中心组件协调多个对象之间的交互。

// 天气控制器（中介者）
class WeatherController {
  private eventBus: EventBus;
  private weatherStatus: WeatherStatus = "unknown";
  private location: {lat: number, lon: number} | null = null;
  
  constructor() {
    this.eventBus = new EventBus();
    this.initSubscriptions();
  }
  
  private initSubscriptions() {
    // 监听位置变化事件
    this.eventBus.subscribe("location-changed", (location) => {
      this.location = location;
      this.requestWeatherData();
    });
    
    // 监听刷新事件
    this.eventBus.subscribe("refresh-requested", () => {
      if (this.location) {
        this.requestWeatherData();
      } else {
        this.requestLocation();
      }
    });
  }
  
  // 请求用户位置
  requestLocation() {
    this.eventBus.emit("request-location");
  }
  
  // 请求天气数据
  private requestWeatherData() {
    if (!this.location) return;
    
    this.setWeatherStatus("loading");
    this.eventBus.emit("weather-loading");
    
    // 模拟API请求
    setTimeout(() => {
      // 假设这是API返回的数据
      const weatherData = {
        temperature: 22,
        condition: "晴天",
        humidity: 65,
        wind: 12
      };
      
      this.setWeatherStatus("loaded");
      this.eventBus.emit("weather-updated", weatherData);
    }, 1000);
  }
  
  // 设置天气状态
  private setWeatherStatus(status: WeatherStatus) {
    this.weatherStatus = status;
    console.log(`天气状态变为: ${status}`);
  }
  
  // 启动应用
  start() {
    this.requestLocation();
    
    // 设置自动刷新（每30分钟）
    setInterval(() => {
      this.eventBus.emit("refresh-requested");
    }, 30 * 60 * 1000);
  }
  
  // 提供订阅方法
  onWeatherUpdated(callback: (data: any) => void) {
    return this.eventBus.subscribe("weather-updated", callback);
  }
  
  onWeatherLoading(callback: () => void) {
    return this.eventBus.subscribe("weather-loading", callback);
  }
  
  onRequestLocation(callback: () => void) {
    return this.eventBus.subscribe("request-location", callback);
  }
  
  // 发布位置信息
  publishLocation(lat: number, lon: number) {
    this.eventBus.emit("location-changed", {lat, lon});
  }
}

实际应用示例

下面是如何使用这个控制器的简单示例：

// 创建天气应用
class WeatherApp {
  private controller: WeatherController;
  
  constructor() {
    this.controller = new WeatherController();
    this.setupUI();
  }
  
  private setupUI() {
    // 订阅天气更新
    this.controller.onWeatherUpdated((data) => {
      this.updateUI(data);
    });
    
    // 订阅加载状态
    this.controller.onWeatherLoading(() => {
      this.showLoadingSpinner();
    });
    
    // 处理位置请求
    this.controller.onRequestLocation(() => {
      this.requestUserLocation();
    });
    
    // 设置刷新按钮
    document.getElementById('refresh-btn')?.addEventListener('click', () => {
      this.controller.requestLocation();
    });
  }
  
  private updateUI(data: any) {
    console.log("更新UI显示:", data);
    document.getElementById('temperature')!.textContent = `${data.temperature}°C`;
    document.getElementById('condition')!.textContent = data.condition;
    document.getElementById('humidity')!.textContent = `湿度: ${data.humidity}%`;
    document.getElementById('wind')!.textContent = `风速: ${data.wind}km/h`;
    this.hideLoadingSpinner();
  }
  
  private showLoadingSpinner() {
    document.getElementById('loading')!.style.display = 'block';
  }
  
  private hideLoadingSpinner() {
    document.getElementById('loading')!.style.display = 'none';
  }
  
  private requestUserLocation() {
    // 假设这里调用浏览器的地理位置API
    console.log("请求用户位置");
    
    // 模拟获取位置
    setTimeout(() => {
      // 假设这是用户位置
      this.controller.publishLocation(39.9042, 116.4074); // 北京坐标
    }, 500);
  }
  
  // 启动应用
  start() {
    this.controller.start();
  }
}

// 创建并启动应用
const app = new WeatherApp();
app.start();

事件流程解析

让我们理解整个事件流程：

应用启动时，WeatherController 请求用户位置
请求位置触发 request-location 事件
WeatherApp 收到事件，调用浏览器API获取位置
位置获取后，发布 location-changed 事件
WeatherController 收到位置，发出 weather-loading 事件并请求天气数据
数据获取成功后，发出 weather-updated 事件
WeatherApp 收到更新事件，更新界面显示

设计的优势

这种设计带来几个关键优势：

松耦合：组件间通过事件通信，不直接依赖
可测试性：每个组件可以独立测试
可扩展性：添加新功能只需订阅相关事件
清晰的责任划分：
- WeatherController：负责业务逻辑和状态管理
- EventBus：负责事件传递
- WeatherApp：负责UI交互

适用场景

事件驱动架构特别适合：

用户界面开发（如前端应用）
实时数据处理系统
多组件协作的系统
需要松耦合设计的系统

结语

通过这个简单的天气应用例子，我们看到了事件驱动架构的强大和灵活性。它让我们能够构建松耦合、可维护的系统，同时提供清晰的组件间通信机制。

对于初学者来说，理解事件和状态的概念是入门事件驱动开发的关键。从简单应用开始，逐步理解事件流，最终能够设计出优雅、可扩展的应用架构。

希望这个例子能帮助你理解事件驱动架构的核心概念，并在你的下一个项目中尝试应用它！