ts implementa el modo de observador simple

¿Cuál es el patrón del observador?

El patrón de observador es un patrón de diseño que le permite estar siempre al tanto de los cambios en el estado de un objeto. Es una relación de dependencia de uno a muchos, como una suscripción a un periódico.

El patrón del observador se puede ver en todas partes de la vida (cazadores de talentos y buscadores de empleo):

Estuche de estación meteorológica con patrón de diseño headfirst

Hay dos formas de notificar actualizaciones: enviar el tema al observador y extraer el tema por parte del observador. La mayoría de las implementaciones usan push, y el método push también se usa aquí.

La estación meteorológica necesita diseñar un sujeto (Asunto), el cual contiene tres estados: temperatura, humedad y presión del aire, se requiere que cuando el estado del sujeto cambie, debe notificar a los tres tablones de anuncios de estado para que se actualicen. Se requiere que el tipo de tablón de anuncios sea extensible. ,El estado del tema es extensible.

La estación meteorológica aquí se considera como un objeto. Tiene algunos estados y es extensible. Aquí está representada por un objeto y se le pueden agregar los estados extendidos:

type WeatherData = Partial<{
  temperature: string // 气温
  humidity: string // 湿度
  pressure: string // 气压
}>

Piense en cada tablero de anuncios como un observador, que consta de dos funciones: actualizar (actualizar) y mostrar (mostrar). El método de actualización es necesario y se llama uniformemente actualización. Se llama a la actualización cuando cambia el estado del tema de la estación meteorológica. Este proceso es para notificar la actualización

Debido a que diferentes tipos de tableros de anuncios muestran el mismo contenido, el observador debe ser una interfaz

interface Observer {
  update: (data: WeatherData) => void // 更新状态
  display: (data: WeatherData) => void // 展示主题
}

El tema también debe ser una interfaz que contenga algunas API públicas:

interface Subject {
  changed: boolean // 标记状态是否更新
  observers: Observer[] // 所有观察者的集合
  setMeasurementsChanged?: (data: WeatherData) => void // 设置检测值
  measurementsChanged?: (data: WeatherData) => void // 检测值发生变化时调用通知观察者更新
  addObserver: (observer: Observer) => number // 注册观察者
  deleteObserver: (observer: Observer) => boolean // 取消订阅观察者
  notifyObservers: (data: WeatherData) => void // 通知观察者更新  推送最新状态
  setChanged: () => void // 状态变更的标记位
}

Defina la clase de estación meteorológica para implementar la interfaz del tema:

class Weather implements Subject {
  state: WeatherData // 记录气象站状态
  changed: boolean // 是否更新的标记位
  observers: Observer[] // 观察者集合
  constructor() {
    this.observers = [] // 初始化观察者集合
  }
  // 状态变化的钩子
  measurementsChanged(data: WeatherData) {
    console.log('气象站主题更新了,通知观察者更新--------------------')
    this.notifyObservers(data) //
  }
  // 这个方法状态有新值时供外界调用触发更新
  setMeasurementsChanged(data: WeatherData) {
    this.state = data
    // 这里可以控制更新的条件 利于条件控制状态的更新频率 比如温差超过5度或者某个字段变化了才通知更新 可以写自己的变化逻辑
    // if(data.temperature-this.state.temperature>=5) // 伪代码举例 这里的字段并不是数字类型 这里根据实际情况设计
    if (true) {
      this.setChanged(true)
    }
    this.measurementsChanged(data)
  }
  addObserver(observer: Observer) {
    return this.observers.push(observer)
  }

  deleteObserver(observer: Observer) {
    const idx = this.observers.findIndex((e) => e === observer)
    if (idx >= 0) {
      this.observers.splice(idx, 1)
      return true
    }
    return false
  }
  notifyObservers(data: WeatherData) {
    if (!this.changed) return // 如果没有更新则不通知
    // 遍历所有的观察者通知更新
    for (const observer of this.observers) {
      observer.update(data)
    }
    this.setChanged(false) // 通知更新后修改是否更新状态为false
  }
  // 设置是否有更新的标志
  setChanged(flag: boolean) {
    this.changed = flag
  }
}

Después de tener la clase de estación meteorológica, implemente la clase de observador.

// 气温观察者
class TemperatureObserver implements Observer {
  update(data: WeatherData) {
    this.display(data)
  }
  display(data: WeatherData) {
    console.log('温度观察者:', data.temperature)
  }
}
// 湿度观察者
class HumidityObserver implements Observer {
  update(data: WeatherData) {
    this.display(data)
  }
  display(data: WeatherData) {
    console.log('湿度观察者:', data.humidity)
  }
}
// 气压观察者
class PressureObserver implements Observer {
  update(data: WeatherData) {
    this.display(data)
  }
  display(data: WeatherData) {
    console.log('气压观察者:', data.pressure)
  }
}

Los diferentes tipos de tableros de anuncios implementan la interfaz del observador para definir su propio comportamiento de visualización, deben implementar el método de actualización y luego agregar observadores a la estación meteorológica y notificar las actualizaciones.

const subject = new Weather() // 创建气象站主题
// 添加观察者
subject.addObserver(new TemperatureObserver())
subject.addObserver(new HumidityObserver())
subject.addObserver(new PressureObserver())
// 气象站状态发生改变
subject.setMeasurementsChanged({
  temperature: '37度',
  humidity: '干燥',
  pressure: '101帕',
})
subject.setMeasurementsChanged({
  temperature: '38度',
  humidity: '滋润',
  pressure: '99帕',
})

La consola imprime los resultados y dos cambios de estado exitosos notifican la actualización.

 Lo anterior es un caso simple del modo de observación. El caso original se implementó en Java. Después de comprenderlo, lo reescribí en ts. El principio de respuesta de Vue también utiliza el modo de observador, que notifica a la página de actualización sobre los cambios de datos.