por In the world of programming there are many recurring problems that arise when developing code. For this reason, design patterns have been created that standardly solve these problems. In this post, we will teach you What is the dependency injection pattern and how does it work in a web project.
What is the dependency injection pattern?
A pattern in programming is a solution to problems in our code. Normally, patterns determine a way to approach the architecture of our project. So, just as there is the model view controller (MVC) pattern that divides the responsibilities of the frontendthere is the dependency injection pattern.
The dependency injection pattern is one of the simplest patterns. This consists of insert dependencies to other classes in the constructor of a class.
We give you an example. Suppose we have a project that simulates Twitter and we have created a controller with a class to manage the transformation of data into a list of tweets. We have given this controller the name TwetListController. Next, we’ve created a notification element that appears when an error happens. This element is controlled by the class NotificationController.
To know the code for this notification handler, we invite you to read our posts about creating a custom element in frontend and delete an alert with click in frontend JavaScript.
So, our TweetListController you will need to call an instance of NotificationController to be able to notify you of an error and execute a message. For it, We will have to pass that instance as a parameter. Next, we show you the lines of code that we inserted in our index.js To execute this action:
const notificationController = new NotificationController ( );
const tweetListController = new TweetListController (tweetListElement, notificationController);
If you have doubts about the handling of the concepts class, constructor and new, We recommend that you read our posts about classes and instances in JavaScript, creating classes in JavaScript and what is the constructor of a class in JavaScript.
This is what the dependency injection pattern is all about, of inserting dependencies as parameters of a class. Do this step in our index.jswill allow us to then execute the inserted dependency using the class constructor and the method Este. Next, we show you this execution in our class TweetListController:
export class TweetListController {
tweetListElement = null;
constructor (tweetListElement, notificationController) {
this.tweetListElement = tweetListElement;
this.notificationController = notificationController;
}
With the previous lines of code, we have managed to insert the notificationController as a parameter of the constructor and define it as a property of the class TweetListController. This last step will allow us use the property and its functions to execute various actions in our controller code. That is, now we could insert the following line inside the method catch of TweetListController to make NotificationController run a notification with our message.
this.notificationController.show(«error getting tweets»);
What is the dependency injection pattern for?
As you can see in our example, the dependency injection pattern It allows us to communicate controllers with each other. To what end? Well, in order to prevent a controller from going outside its domains for a piece of data or a function. That is, we insert the dependency that has the necessary data or function as a parameter, making access to its content easier and more logical. This helps us fix a very common mistake: bringing external data to the DOM node that is managed by a controller.
Following our example, the dependency injection pattern allows us to make use of the method Show of the class NotificationControlleravoiding selecting the DOM node that creates this notification and that is outside the domains of TweetListController.
We know that understanding this pattern is not easy. Therefore, we invite you to learn more about this concept with our posts on the disadvantage of the dependency injection pattern and the comparison between PubSub vs dependency injection design patterns.
Do you want to continue learning?
By reading this post, you have learned what the dependency injection pattern is and how to use it in your web projects. However, There is still a lot to learn before you are a web development expert! Therefore, we invite you to be part of our Full Stack Web Development Bootcamp, an intensive training space where you will learn everything you need about this world. Do you want to continue learning with us? Don’t miss out and request information now!