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:
//patron de diseño inyeccion de dependencias
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.
//inyeccion de dependencias javascript
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 patron di 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!
