Getting Started with Require JS

Hi Friends,

In this section, we will continue from the last post and we will delve further into RequireJS. However, I forgot to take out JQuery from the main function call as nothing uses that like shown below.

However, same is used by our MoviesApp module. Hence, I have moved the same there.

There are few more modules as well which are also dependent on JQuery, hence will keep JQuery into that like shown below in the finished code.

With the above changes in place, app will function as it is. However, I can go ahead and improvise the code as shown below. Here, I have wrapped handler stuffs into private functions and then calling the same.

This will also keep the app behavior as it is. Only thing is its getting more modular now. Although, we have separated each individual modules, but its still little lengthy. Let’s slice out each individual modules into their own individual files like Single Responsibility Principle.

Now, here is a trick, naming is important. At first place, requirejs will try to required module in local cache, if it doesn’t find then it will look in other locations, in that case, name will be treated as url prefixed with base path. By default, base path is set to the directory where main.js is located in. In coming sections, we will see how we can change the location of base path. Below is the first module, which we moved in different file. Now, here we don’t need module name explicitly as this will be taken care by requirejs, which requested the same orignally.

Similarly, I have moved all other modules into different files as shown below.

Now, let me go ahead and move data-operation stuffs under one directory and DOM operations into another like shown below.

Now, I can go ahead and fix the references like shown below.

With the above change in place, app will work fine, but, when I see in the network tab, I can see network load has increased as there are many new request coming which was initially handled by one request.