Implementar patrón PubSub con clase en JavaScript

Autor: | Última modificación: 11 de noviembre de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!