Load External JS Asynchronously Using RequireJS

Let's take a look at RequireJS, an AMD (Asynchronous Module Definition) compatible asynchronous script loader. In my experience with RequireJS I have enjoyed working with it and will be using it in all my future development.

This is very much useful if you are using many external js and you want that it loads asynchronously in particular order then this will be very much helpful for you. Let's take the live example, I am loading chart js (jquery.jqplot.js) and jquery (jquery.js). Now, in chart.js we are using "$" which is defined in jquery (jquery.js) so we need that it load in a sequence, otherwise it will raise an error so that we have to use Asynchronous loading tool.

Let's start with an example below.

 

Firstly have a look the hierarchy of the application, we have app.html as starting page. In html page we have just loaded and require.js and define data-main which js will load first on this page. Remember we are not defined .js extension in this.

Now, We require following sequence for js loading.

1. lib/jquery.js

2. lib/jquery.alpha.js

3. lib/jquery.beta.js

4. app/main.js

As we seen above that data-main will load app.js first then what after that? For that we have write requirejs code in app.js as below. We have main two tag 1. config and 2. requirejs.

1. In first tag we will configure all the things.

• BaseUrl : will define base url to load a js. We can define the path of application in this.
• Paths : If we are loading form different directory, then we have to define paths. Remember this path will be from our base path not loading page.
• Shim : This will basically define dependencies it can be single or multiple.

2. Second tag will load defined js on the page.

 

Let's understand "shim" tag deeply. W2e have define three(3) js in shim.

1. jquery.alpha : Before loading this browser will wait to load jquery.js then only this js will load. If we have more then two then it will wait for all the js which we have define.

2. jquery.beta : For this we have put a condition that jquery.alpha load first and in jquery.alpha we have also condition as jquery.js so sequence will be jquery.js > jquery.alpha.js > jquery.beta.js.

3. Main.js : To load, this js we have condition that we need jquery.beta.js so it will go to load jquery.beta.js for this we have need jquery.alpha.js so it will go for jquery.alpha.js and for that also we have the condition as jquery.js must be loaded so it will load according like this. Jquery.js > jquery.alpha.js > jquery.beta.js > main.js.

Requirejs will load all the js define in this tag. It will not consider sequence. So order does not mean in bellow line it will load according to "shim" order.

requirejs(["jquery", "jquery.alpha", "jquery.beta", "app/main"]); 

We have taken flag to check a sequence as well, we have appended some text to understand execution flow. Now see the code of other pages as bellow we have just appended text in the body.

jquery.alpha.js/jquery.beta.js

 

main.js

 

 

Output

As we have discussed we get the sequence. Now refer the site [http://requirejs.org/] and try your own code with enhancement. Also zip file for this demo is attached you can try this too.