El patrón PubSub consiste en la comunicación entre dos elementos de un proyecto (un publisher y un suscriber) a partir de un tercer elemento llamado event bus. En este post, te enseñaremos cómo implementar patrón PubSub con clase en JavaScript.
¿Cómo implementar patrón PubSub con clase en JavaScript?
Para implementar patrón PubSub con clase en JavaScript, primero deberás crear un nuevo archivo en tu proyecto llamado pubSub.js. Dentro de este archivo, insertarás las siguientes líneas de código.
NOTA: a continuación te mostramos un código que puedes insertar directamente en tu archivo. Ten presente que este código está comentado en inglés para que puedas entender exactamente qué hace cada línea. A la hora de copiar y pegarlo, puedes eliminar los comentarios o modificar su lógica o idioma para que tú equipo los entienda mejor.
class PubSub {
TOPICS = {
SHOW_ERROR_NOTIFICATION: «SHOW_ERROR_NOTIFICATION»,
SHOW_SUCCES_NOTIFICATION: «SHOW_ERROR_NOTIFICATION»,
};
constructor ( ) {
this.topics = { }
this.hOP = this.topics.hasOwnProperty ( );
}
suscribe (topic, listener) {
// Create this topic’s object if not yet created
if (!this.hOP.call (this.topics, topic)) this.topics [topic] = [ ];
// Add the listener to queue
var index = this.topics [topic].push (listener) -1;
//Provide handle back for removal of topic
return {
remove: function ( ) {
delete this.topics [topic] [index];
},
};
}
publish (topic, info) {
//If the topic doesn’t exist, or there’s no listeners in queue, just leave
if (!this.hOP.call (this.topics, topic)) return;
// Cycle through topics queue, fire!
this.topics [topic].forEach (function (item) {
item (info != undefined ? info : { });
});
}
}
export const pubSub = new PubSub ( );
Partes del código para implementar patrón PubSub con clase en JavaScript
Como puedes ver, el código que insertamos en nuestro nuevo archivo, que nos permite implementar patrón PubSub con clase en JavaScript, tiene varias partes. A continuación, te enseñamos exactamente qué hace cada una.
Objeto de eventos
Dentro de la clase PubSub que hemos creado, tenemos una propiedad que se llama TOPICS. Esta es una propiedad pública de la clase porque, como puedes leer en el artículo private class fields de la MDN, todas las propiedades de clase son públicas de manera predeterminada.
Esta propiedad se iguala a un objeto que tiene, a su vez, varias propiedades dentro. En realidad, este objeto es un listado de los eventos que manejaremos con el patrón PubSub, aquellos que serán o emitidos o escuchados por las distintas piezas de nuestro proyecto. Esto nos permitirá tener recogidos los eventos en un solo lugar, lo que será muy útil a la hora de aplicarlos.
En nuestro código de ejemplo solamente existen dos topics o eventos, uno que nos permite mostrar una notificación de error y otro que muestra una notificación de éxito.
Para conocer más sobre esta sección de la clase PubSub, te invitamos a leer nuestro post sobre crear un índice de eventos en el patrón PubSub, donde te explicamos por qué agregamos esta propiedad y su usabilidad en la práctica.
Método suscribe y publish
Después del índice que hemos creado con la propiedad topics, en nuestro código para implementar patrón PubSub con clase en JavaScript encontramos dos métodos. Uno de ellos nos sirve para publicar un evento en el event bus y otro para suscribirse a dicho evento.
El método suscribe, al igual que el método addEventListener de JavaScript, recibe dos parámetros: el evento al que quiere suscribirse o escuchar (topic) y la función callback a ejecutar cuando llegue dicho evento (listener). Siguiendo nuestro ejemplo, un suscriber podría escuchar que llega el evento SHOW_ERROR_NOTIFICATION insertándolo en el primer parámetro. Luego, como segundo parámetro insertaremos la reacción debida a ese evento.
El método publish también recibe dos parámetros: el evento que quiere que se ejecute (topic) y un detalle para pasar a ese evento, que puede ser un mensaje en formato string o algo por el estilo (info).
Para conocer más sobre las líneas de código exactas que permiten que cada uno de estos métodos ejecuten dichas acciones, te recomendamos leer nuestro post sobre los métodos suscribe y publish en PubSub.
Exportación
La parte final del código que nos permite implementar patrón PubSub con clase en JavaScript es un simple export. Ahora, esta exportación no es como cualquier otra, pues no está exportando la clase PubSub como tal, sino que está guardando una instancia de la clase en la constante PubSub.
export const pubSub = new PubSub ( );
Esta exportación nos permite asegurarnos de que el resto de piezas de nuestro proyecto usen una única instancia de la clase y no estén creando nuevas instancias cada vez. Esta estrategia se leconoce como patrón singleton.
¿Cuál es el siguiente paso?
Ahora que sabes exactamente qué líneas de código necesitas para implementar patrón PubSub con clase en JavaScript, ¡es momento de utilizarlo en tus proyectos web! Para conocer más patrones, lenguajes y herramientas fundamentales para el mundo del desarrollo web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva con el que te convertirás en un experto de este mundo en pocos meses. ¡No te lo pierdas y pide información ahora!
