Implementando el patrón de diseño del observador en TypeScript

Implementando el patrón de diseño del observador en TypeScript

Un patrón de diseño es una plantilla que resuelve un problema recurrente en el diseño de software.





cómo usar la audacia para hacer música

El patrón de observador, también conocido como patrón de publicación-suscripción, es un patrón de comportamiento. Le permite notificar a múltiples objetos o suscriptores sobre cualquier evento que se publique en el objeto que están observando.





MAKEUSEOF VÍDEO DEL DÍA

Aquí aprenderá a implementar el patrón de diseño del observador en TypeScript.





El patrón del observador

El patrón de observador funciona definiendo una relación de uno a muchos entre el editor y sus suscriptores. Cuando ocurre un evento en el editor, notificará a todos los suscriptores de ese evento. Un ejemplo generalizado de este patrón es Oyentes de eventos de JavaScript .

Por contexto, suponga que está creando un rastreador de inventario que realiza un seguimiento de la cantidad de productos en su tienda. En este caso, su tienda es el sujeto/editor y su inventario es el observador/suscriptor. Usar el patrón de diseño del observador sería óptimo en esta situación.



En el patrón de diseño del observador, su clase de sujeto debe implementar tres métodos:

  • Un adjuntar método. Este método añade un observador al sujeto.
  • A despegar método. Este método elimina un observador de un sujeto.
  • A notificar/actualizar método. Este método notifica a los observadores del sujeto cuando cambia el estado del sujeto.

Su clase de observador debe implementar un método, el actualizar método. Este método reacciona cuando hay un cambio en el estado de su sujeto.





cómo crear un archivo bat

Implementando las Clases Sujeto y Observador

El primer paso para implementar este patrón es crear interfaces para la clase sujeto y observador, para garantizar que implementen los métodos correctos:

// Subject/Publisher Interface 
interface Subject {
attachObserver(observer: Observer): void;
detachObserver(observer: Observer): void;
notifyObserver(): void;
}

// Observer/Subscriber Interface
interface Observer {
update(subject: Subject): void;
}

Las interfaces en el bloque de código anterior definen los métodos que deben implementar sus clases concretas.





Una clase de materia concreta

El siguiente paso es implementar una clase de sujeto concreto que implemente el Tema interfaz:

// Subject 
class Store implements Subject {}

A continuación, inicialice el Tema estado en el Tienda clase. Los observadores del sujeto reaccionarán a los cambios en este estado.

cómo verificar gpu en windows 10

En este caso, el estado es un número, y los observadores reaccionarán ante un aumento en el número:

// Subject state 
private numberOfProducts: number;

A continuación, inicialice una matriz de observadores. Esta matriz es cómo harás un seguimiento de los observadores:

// initializing observers 
private observers: Observer[] = [];