In this section, we are going to delve further in RequireJS-Fundametal sections. In the last post, we have started achieving modularity in our code. In this section, we will go further and extend the same and make it completely modular.
Below, I have created another module for managing DOM.
This also, I have created on the same lines. Now, I just need to utilize the same in our main method like shown below.
After this, I have also injected the dependency with module name in the main function like I did earlier. At this moment, my app is working fine. Now, Let’s go ahead and do the same with others as well. This way I am making the code more readable and clutter-free. Here, as you can see in the below snippet, my Movie management module is dependent on other modules as well, Hence, I have injected those dependencies in there.
Now, since this module is dependent on other two modules. Hence, my main stub shouldn’t require these two modules rather it depends on management module like shown below.
Now, I am left with only one piece and that is event handlers section. Now, let’s go ahead and do that as well. Below is the snippet for the same.
Now, my main stub looks like something
Clean and Modular. So, we started with Spaghetti code and we finished with cleaner and modular code. Below is the finished code for the same.
In the coming section, we’ll improvise further on this. Till then stay tuned and Happy Coding.