Patrón de inyección de dependencias

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

En el mundo de la programación existen muchos problemas recurrentes que se presentan en la elaboración de código. Por ello, se han creado patrones de diseño que solucionan de manera estándar estos problemas. En este post, te enseñaremos qué es el patrón de inyección de dependencias y cómo funciona en un proyecto web.

¿Qué es el patrón de inyección de dependencias?

Un patrón en programación es una solución a problemas en nuestro código. Normalmente, los patrones determinan una forma de aproximarnos a la arquitectura de nuestro proyecto. Entonces, al igual que existe el patrón modelo vista controlador (MVC) que divide las responsabilidades del frontend, existe el patrón de inyección de dependencias.

El patrón de inyección de dependencias es uno de los patrones más sencillos. Este consiste en insertar dependencias a otras clases en el constructor de una clase.

Te ponemos un ejemplo. Supongamos que tenemos un proyecto que simula Twitter y hemos creado un controlador con una clase para gestionar la transformación de datos en un listado de tweets. A este controlador le hemos dado el nombre de TweetListController. Luego, hemos creado un elemento de notificación que aparece cuando sucede un error. Este elemento lo controla la clase NotificationController.

Para conocer el código de este controlador de notificación, te invitamos a leer nuestros posts sobre crear un elemento personalizado en frontend y eliminar una alerta con click en frontend JavaScript.

Entonces, nuestro TweetListController necesitará llamar a una instancia de NotificationController para poder avisarle de un error y ejecutar un mensaje. Para ello, deberemos pasarle esa instancia como parámetro. A continuación, te mostramos las líneas de código que insertamos en nuestro index.js para ejecutar esta acción:

const notificationController = new NotificationController ( );

const tweetListController = new TweetListController (tweetListElement, notificationController);

Si tienes dudas sobre el manejo de los conceptos class, constructor y new, te recomendamos leer nuestros posts sobre clases e instancias en JavaScript, crear clases en JavaScript y qué es el constructor de una clase en JavaScript.

De esto se trata el patrón de inyección de dependencias, de insertar dependencias como parámetros de una clase. Hacer este paso en nuestro index.js, nos permitirá después ejecutar la dependencia insertada usando el constructor de la clase y el método this. A continuación, te mostramos esta ejecución en nuestra clase TweetListController:

export class TweetListController {

tweetListElement = null;

constructor (tweetListElement, notificationController) {

this.tweetListElement = tweetListElement;

this.notificationController = notificationController;

}

Con las líneas de código anteriores, hemos logrado insertar el notificationController como parámetro del constructor y definirlo como propiedad de la clase TweetListController. Este último paso nos permitirá usar la propiedad y sus funciones para ejecutar diversas acciones en el código de nuestro controlador. Es decir, ahora podríamos insertar la siguiente línea dentro del método catch de TweetListController para hacer que NotificationController ejecute una notificación con nuestro mensaje.

this.notificationController.show («error obteniendo tweets»);

¿Para qué sirve el patrón de inyección de dependencias?

Como puedes notar en nuestro ejemplo, el patrón de inyección de dependencias nos permite comunicar controladores entre sí. ¿Con qué fin? Pues con el fin de evitar que un controlador vaya fuera de sus dominios por un dato o una función. Es decir, insertamos la dependencia que tiene el dato o la función necesaria como parámetro, haciendo más fácil y lógico el acceso a su contenido. Esto nos ayuda a corregir un error muy común: traer datos externos al nodo del DOM que gestiona un controlador.

Siguiendo nuestro ejemplo, el patrón de inyección de dependencias nos permite hacer uso del método show de la clase NotificationController, evitando seleccionar el nodo del DOM que crea esta notificación y que se encuentra fuera de los dominios de TweetListController.

Sabemos que entender este patrón no es sencillo. Por ello, te invitamos a conocer más sobre este concepto con nuestros posts sobre la desventaja del patrón de inyección de dependencias y la comparación entre los patrones de diseño PubSub vs inyección de dependencias.

¿Quieres seguir aprendiendo?

Al leer este post, has aprendido qué es el patrón de inyección de dependencias y cómo utilizarlo en tus proyectos web. Sin embargo, ¡todavía queda mucho por aprender antes de ser un experto del desarrollo web! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás todo lo necesario sobre este mundo. ¿Quieres seguir aprendiendo con nosotros? ¡No te lo pierdas y solicita 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!