Implementar un patrón de observador simple (Observer) usando JS

---

⭐ Introducción de la columna

Viaje de entrada al front-end: explore el maravilloso mundo del desarrollo web. Recuerde hacer clic en el enlace de arriba o a la derecha para suscribirse a esta columna. Geometry lo llevará en un viaje de entrada al front-end.

¡Bienvenido al recorrido introductorio del front-end! Esta columna está hecha a medida para aquellos que están interesados ​​en el desarrollo web y acaban de ingresar al campo del front-end. Ya sea que sea un completo novato o un desarrollador con algunos conocimientos básicos, aquí le brindaremos una plataforma de aprendizaje sistemática y amigable. En esta columna, la actualizaremos todos los días en forma de preguntas y respuestas, presentándole puntos de conocimiento de front-end seleccionados y respuestas a preguntas frecuentes. A través del formato de preguntas y respuestas, esperamos responder más directamente a las preguntas de los lectores sobre la tecnología front-end y ayudar a todos a establecer gradualmente una base sólida. Ya sea HTML, CSS, JavaScript o varios marcos y herramientas comunes, explicaremos los conceptos de una manera simple y fácil de entender, y brindaremos ejemplos y ejercicios prácticos para solidificar lo que ha aprendido. Al mismo tiempo, también compartiremos algunos consejos prácticos y mejores prácticas para ayudarlo a comprender y aplicar mejor diversas tecnologías en el desarrollo front-end.

No solo eso, también lanzaremos periódicamente algunos tutoriales prácticos de proyectos para que puedas aplicar los conocimientos que has aprendido al desarrollo real. A través de la práctica de proyectos reales, podrá comprender mejor el flujo de trabajo y la metodología del desarrollo front-end y desarrollar su propia capacidad para resolver problemas y desarrollarse de forma independiente. Creemos que sólo mediante la acumulación y la práctica continuas podremos dominar verdaderamente la tecnología de desarrollo front-end. Entonces, ¡prepárate para el desafío y embárcate con valentía en este viaje de entrada frontal! Ya sea que esté buscando un cambio de carrera, mejorar sus habilidades o satisfacer sus intereses personales, estamos dedicados a brindarle los mejores recursos de aprendizaje y apoyo. ¡Exploremos juntos el maravilloso mundo del desarrollo web! ¡Únase al viaje introductorio del front-end y conviértase en un excelente desarrollador front-end! Zarpemos en el viaje frontal

---

⭐ Observador manual

Observer Pattern es un patrón de diseño de comportamiento que se utiliza para definir dependencias de uno a muchos entre objetos, de modo que cuando el estado de un objeto cambie, todos los objetos que dependen de él serán notificados y actualizados automáticamente. En JavaScript, el patrón de observador se utiliza a menudo para implementar patrones personalizados de manejo de eventos o suscripción/publicación de datos.

Aquí hay un ejemplo simple de JavaScript sobre la implementación del patrón Observer:

// 创建一个观察者（订阅者）对象
class Observer {
    
    
  constructor() {
    
    
    this.observers = [];
  }

  // 添加观察者
  subscribe(callback) {
    
    
    this.observers.push(callback);
  }

  // 移除观察者
  unsubscribe(callback) {
    
    
    this.observers = this.observers.filter(observer => observer !== callback);
  }

  // 通知观察者
  notify(data) {
    
    
    this.observers.forEach(observer => observer(data));
  }
}

// 创建一个主题（被观察者）对象
class Subject {
    
    
  constructor() {
    
    
    this.observers = new Observer();
    this.state = 0;
  }

  // 设置状态并通知观察者
  setState(state) {
    
    
    this.state = state;
    this.observers.notify(this.state);
  }
}

// 创建观察者实例
const observerA = data => console.log(`Observer A: ${
      
      data}`);
const observerB = data => console.log(`Observer B: ${
      
      data}`);
const observerC = data => console.log(`Observer C: ${
      
      data}`);

// 创建主题实例
const subject = new Subject();

// 订阅观察者
subject.observers.subscribe(observerA);
subject.observers.subscribe(observerB);

// 设置主题状态，触发通知
subject.setState(1);

// 取消订阅 observerA
subject.observers.unsubscribe(observerA);

// 再次设置主题状态，触发通知
subject.setState(2);

// 添加一个新观察者
subject.observers.subscribe(observerC);

// 再次设置主题状态，触发通知
subject.setState(3);

En el ejemplo anterior, primero creamos una Observerclase para representar un observador que puede suscribirse, darse de baja y recibir notificaciones. Luego creamos una Subjectclase para representar el tema, que puede establecer el estado y notificar a los observadores. Cuando el estado de un tema cambia, todos los observadores suscritos reciben una notificación y realizan las acciones correspondientes.

Este ejemplo simple de patrón Observer se puede utilizar para crear un sistema de manejo de eventos personalizado o implementar un mecanismo de publicación/suscripción para datos en su aplicación. El patrón Observer es un patrón de diseño común que ayuda a reducir el acoplamiento entre componentes y hace que el código sea más fácil de mantener y ampliar.

---

⭐Escribe al final

Esta columna es adecuada para una amplia gama de lectores y es adecuada para principiantes en front-end; o aquellos que no han aprendido front-end y están interesados ​​en front-end, o estudiantes de back-end que desean mostrarse mejor y expandirse. algunos puntos de conocimiento de front-end durante el proceso de entrevista, por lo que si tiene los conceptos básicos de front-end y sigue esta columna, también puede ayudarlo en gran medida a verificar omisiones y llenar los vacíos. El resultado del contenido, si hay algún defecto en el artículo, puede contactarme a través del lado izquierdo de la página de inicio, avancemos juntos y, al mismo tiempo, también recomiendo varias columnas a todos. Los socios interesados ​​pueden suscribirse: Además de las columnas siguientes, también puedes ir a mi página de inicio para ver otras columnas;

Juegos front-end (gratis) Esta columna lo llevará a un mundo lleno de creatividad y diversión. Utilizando los conocimientos básicos de HTML, CSS y JavaScript, crearemos juntos varios juegos de páginas interesantes. Si es principiante o tiene experiencia en desarrollo front-end, esta columna es para usted. Comenzaremos con lo básico y lo guiaremos paso a paso a través de las habilidades que necesita para crear juegos web. A través de casos prácticos y ejercicios, aprenderá a usar HTML para crear estructuras de páginas, usar CSS para embellecer la interfaz del juego y usar JavaScript para agregar efectos interactivos y dinámicos al juego. En esta columna, cubriremos varios tipos de minijuegos, incluidos juegos de laberintos, rompeladrillos, serpientes, buscaminas, calculadoras, batallas de aviones, tres en raya, rompecabezas, laberintos y más. Cada proyecto lo guía a través del proceso de construcción en pasos claros y concisos, con explicaciones detalladas y ejemplos de código. Al mismo tiempo, también compartiremos algunos consejos de optimización y mejores prácticas para ayudarle a mejorar el rendimiento de la página y la experiencia del usuario. Ya sea que esté buscando un proyecto interesante para ejercitar sus habilidades de front-end o esté interesado en el desarrollo de juegos de páginas, la columna de juegos de front-end será su mejor opción. Haga clic para suscribirse a la columna del juego front-end

Tutorial transparente de Vue3 [De cero a uno] (de pago) ¡Bienvenido al tutorial transparente de Vue3! Esta columna tiene como objetivo proporcionar a todos conocimientos técnicos integrales relacionados con Vue3. Si tiene algo de experiencia con Vue2, esta columna puede ayudarle a dominar los conceptos básicos y el uso de Vue3. Comenzaremos desde cero y lo guiaremos paso a paso para crear una aplicación Vue completa. A través de casos prácticos y ejercicios, aprenderá a utilizar la sintaxis de plantillas, el desarrollo de componentes, la gestión de estado, el enrutamiento y otras funciones de Vue3. También presentaremos algunas funciones avanzadas, como Composition API y Teleport, para ayudarlo a comprender y aplicar mejor las nuevas funciones de Vue3. En esta columna, lo guiaremos a través de cada proyecto en pasos claros y concisos, con explicaciones detalladas y código de muestra. Al mismo tiempo, también compartiremos algunos problemas y soluciones comunes en el desarrollo de Vue3 para ayudarlo a superar las dificultades y mejorar la eficiencia del desarrollo. Ya sea que desee aprender Vue3 en profundidad o necesite una guía completa para crear un proyecto front-end, la columna de tutoriales completos de Vue3 se convertirá en un recurso indispensable para usted. Haga clic para suscribirse a la columna Tutorial transparente de Vue3 [De cero a uno]

La Guía de introducción a TypeScript (gratuita) es una columna diseñada para ayudarle a empezar y dominar rápidamente las tecnologías relacionadas con TypeScript. A través de un lenguaje conciso y claro y un rico código de muestra, explicaremos en profundidad los conceptos básicos, la sintaxis y las características de TypeScript. Ya sea un principiante o un desarrollador experimentado, aquí puede encontrar el camino de aprendizaje que más le convenga. Desde características principales como anotaciones de tipo, interfaces y clases hasta el desarrollo modular, la configuración de herramientas y la integración con marcos de front-end comunes, cubriremos todos los aspectos de manera integral. Al leer esta columna, podrá mejorar la confiabilidad y la capacidad de mantenimiento del código JavaScript y proporcionar una mejor calidad del código y eficiencia de desarrollo para sus proyectos. ¡Embárquemonos juntos en este emocionante y desafiante viaje de TypeScript! Haga clic para suscribirse a la columna de la Guía de introducción a TypeScript