Hi Friends,
In this section, we will continue from the previous post, where in we have seen how to get started with RequireJS. In this section, we are going to look how to construct modules and how DI(Dependency Injection) works? In the last section, we were still loading JQuery using direct reference. However, we can inject the same using require as well like shown below.
Below is the finished form of main.js.
Here, In the config section, I have added the jquery dependency with it’s path. We will delve in config piece explicitly in coming sections. But, for now just understand that RequireJS is asking JQuery to load before the main script runs as this is dependent on Jquery. Now, with this module jquery module will get registered with RequireJS and hence forth will be available from RequireJS cache.
Also, to specify what modules we are dependent on we need to specify require. require is the function which first takes dependent module. Here, jquery is the module name which is specified as first parameter. Second parameter is the callback function. Since, the modules in requirejs gets loaded asynchronously, we pass require js $ as parameter in function just to understand that underneath all the codes are normal JQuery Stuffs. These stuffs will again understand in depth in coming section. Hence, my finished code now looks like shown below.
Now, when I go ahead and save and run the app, then it will produce the below stuff.
And, when I look at the network tab then I can see all stuffs are loaded via Require-JS itself.
However, with the above change in place, my application is running seamlessly same as expected. Only thing is we are progressing towards more modular and readable code. Now, let’s go ahead and break the code into different modules also known as AMD(Asynchronous Module Definition) . This also means we will stick to “Single Responsibility Principle” here.
We define a module with the keyword define as shown below in the snippet. define takes first parameter as the module name, second parameter as the list of dependencies. In this case we don’t have any dependency, hence its blank, then third parameter we have is callback function, which needs to be performed under this module. For now, we are keeping the modules in the same file, but later we will slice this out in different files and then load accordingly. For now just understand that AMDs are asynchronous, hence we are using callback functions.
One more thing at the bottom of the module what I have done is I have included return object. The object which is returned from the return function is; what is passed in the other modules when the same is called. This is also to make the modules publicly available. Below is the simple module snippet in its finished form.
Now, we have the new module defined. However, now we need to consume the same via module name rather than calling direct as now all these stuffs are contained to module which means its in local scope now. Hence, we need to tell RequireJS, that our app is now dependent on this new module and then pass the module in the callback function as well like shown below. 
Now, we also need to refer the module name before the function names as now its local to module name. Below is the finished code for the same.
Now, with the above change in place, we have started introducing modularity in our code without breaking or changing any behavior to our application. I hope you would have liked this discussion. In the coming section, we will delve further and make our code more robust and user-readable. Till then stay tuned and Happy Coding.
Thanks,
Rahul Sahay
Happy Coding
