Sebastian Gomez
En este post, aprenderemos cómo implementar el patrón observer en Javascript y en qué situaciones lo podemos usar. 💡
El patrón observador es uno de los patrones de diseño de software más usado en Javascript. De él se extienden importantes aplicaciones que pueden ayudar a definir mejores arquitecturas en aplicaciones web, por lo que su uso y estudio es altamente recomendado. 📚
📌 Patrón observador: conceptos clavePara implementar el patrón observador en Javascript, comenzamos creando una clase llamada Publicador que contenga los métodos subscribe(), unsubscribe() y notify(). Aquí tienes el código de ejemplo:
// Define la clase "Publicador"
class Publicador {
// Constructor de la clase "Publicador"
constructor() {
// Crea una propiedad "subscriptors" para almacenar la lista de subscriptores
this.subscriptors = [];
}
// Método "subscribe" para agregar un nuevo subscriptor a la lista de subscriptores
subscribe(subscriptor) {
// Agrega el "subscriptor" pasado como argumento al final de la lista "subscriptors"
this.subscriptors.push(subscriptor);
}
// Método "unsubscribe" para eliminar un subscriptor de la lista de subscriptores
unsubscribe(subscriptor) {
// Filtra la lista de subscriptores, manteniendo solo aquellos que no coincidan con el "subscriptor" pasado como argumento
this.subscriptors = this.subscriptors.filter(
(item) => item !== subscriptor
);
}
// Método "notify" para notificar un evento a todos los subscriptores de la lista
notify(event) {
// Itera sobre cada elemento de la lista de subscriptores
this.subscriptors.forEach((item) => {
// Llama al método "call" en cada subscriptor, pasando el objeto "this" como contexto y el "event" como argumento
item.call(this, event);
});
}
}
Ahora, imaginemos que usaremos esta definición de Publicador para un periódico que regularmente publica nuevas ediciones. 📰
const periodico = new Publicador();
Pensemos en los clientes (subscriptores), que necesitarán saber cuándo llega una nueva versión del periódico. Inicialmente, los clientes son funciones:
// Define la función "Observer" que acepta un argumento "edicion"
function Observer(edicion) {
// Imprime un mensaje en la consola, informando que llegó una nueva edición con el nombre del argumento "edicion"
console.log("LLegó una nueva edición con el nombre de: " + edicion);
}
// Utiliza el método "subscribe" del objeto "periodico" para suscribir la función "Observer" como subscriptor
periodico.subscribe(Observer);
// Utiliza nuevamente el método "subscribe" del objeto "periodico" para suscribir otra vez la función "Observer" como subscriptor
// (en este caso, "Observer" será notificado dos veces por cada evento)
periodico.subscribe(Observer);
// Utiliza el método "notify" del objeto "periodico" para notificar a todos los subscriptores, en este caso, las dos instancias de "Observer"
// Pasando como argumento el string "Nueva edicion"
periodico.notify("Nueva edicion");
Como un mejor acercamiento, podríamos definir una clase para los clientes que nos permita crear instancias de ella y tener un control más granular. Además, debemos definir un método específico para escuchar nuevas ediciones del periódico.
// Define la clase "Observador"
class Observador {
// Constructor de la clase "Observador" que acepta un argumento "id"
constructor(id) {
// Asigna el valor del argumento "id" a la propiedad "id" del objeto
this.id = id;
// Imprime un mensaje en la consola, informando que se ha creado un subscriptor con el número de "id" pasado como argumento
console.log("Se ha creado el subscriptor #: " + id);
}
// Método "buzon" que acepta un argumento "edicion"
buzon(edicion) {
// Imprime un mensaje en la consola, informando que el subscriptor con el "id" recibió una nueva edición con el nombre del argumento "edicion"
console.log(
"Subscriptor # " + this.id + " recibió una nueva edición: " + edicion
);
}
}
// Crea una nueva instancia de la clase "Subscriptor" con el argumento "1" y la asigna a la constante "subscriptor1"
const subscriptor1 = new Subscriptor(1);
// Crea una nueva instancia de la clase "Subscriptor" con el argumento "2" y la asigna a la constante "subscriptor2"
const subscriptor2 = new Subscriptor(2);
// Crea una nueva instancia de la clase "Subscriptor" con el argumento "3" y la asigna a la constante "subscriptor3"
const subscriptor3 = new Subscriptor(3);
De esta forma, podemos tener más control sobre los subscriptores y podemos suscribirlos y des-suscribirlos de mejor manera. 💼
🏁 ConclusiónEl patrón observador es fácil de implementar en Javascript y su utilidad es casi inmediata. Con este patrón, podemos manejar de manera efectiva la comunicación entre objetos, manteniendo el código limpio y organizado. 🧹
Esperamos que este post te haya sido útil y te ayude a aplicar el patrón observador en tus proyectos futuros. Si tienes alguna duda, sugerencia o quieres compartir tus experiencias implementando este patrón, no dudes en dejarnos un comentario. ¡Buena suerte en tus proyectos! 🚀
Creador de contenido principalmente acerca de tecnología.