Javascript file loading: labjs and requirejs

Traditionally, the <SCRIPT> label is used to load JavaScript files.

As shown below:

<SCRIPT type = "text/JavaScript" src = "example. js"> </SCRIPT>

<SCRIPT> labels are easy to read and run as long as you add them to a webpage. However, it has some serious defects.

(1) strict reading order.Because the browser reads JavaScript files in the order in which <SCRIPT> appears on the webpage and runs them immediately, when multiple files depend on each other, the files with the minimum dependency must be placed at the beginning, files with the largest dependency must be placed at the end; otherwiseCodeAn error is reported.

(2) performance problems.The browser uses the "synchronous mode" to load the <SCRIPT> tag. That is to say, the page is blocked, waiting for the Javascript file to be loaded, and then running the subsequent HTML code. When there are multiple <SCRIPT> tags, the browser cannot read them at the same time. Therefore, you must read one tag before reading the other one, resulting in a much longer read time and slow page response.

To solve these problems, you can use the DOM method to dynamically load JavaScript files.

Function loadscript (URL ){

VaR script = Document. createelement ("script ");

Script. type = "text/JavaScript ";

Script. src = URL;

Document. Body. appendchild (SCRIPT );

}

The principle of doing so is that the browser instantly creates a <SCRIPT> tag and then "asynchronously" reads JavaScript files. This will not cause page congestion, but will cause another problem: the loaded Javascript file is not in the original Dom structure, so the dom-ready (domcontentloaded) event and window. the callback function specified in the onload event is invalid.

The external function libraries labjs and requirejs help us manage JavaScript loading more effectively.

The following is based onArticleTo illustrate the basic usage of these two function libraries. For more advanced usage, see their documentation.

<SCRIPT src = "script1.js"> </SCRIPT>

<SCRIPT src = "script2-a.js"> </SCRIPT>

<SCRIPT src = "script2-b.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">

Initscript1 ();

Initscript2 ();

</SCRIPT>

<SCRIPT src = "script3.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">

Initscript3 ();

</SCRIPT>

The above code will load four JavaScript files in turn: script1.js, script2-a.js, script2-b.js and script3.js. After loading the first three files, run the two functions initscript1 () and initscript2 (). After loading the fourth file, run the function initscript3 ().

Next, use labjs to rewrite it:

<SCRIPT src = "lab. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">

$ Lab

. Script ("script1.js"). Wait ()

. Script ("script2-a.js ")

. Script ("script2-b.js ")

. Wait (function (){

Initscript1 ();

Initscript2 ();

})

. Script ("script3.js ")

. Wait (function (){

Initscript3 ();

});

</SCRIPT>

First, the $ lab object replaces the <SCRIPT> tag, and then. the script () method indicates loading JavaScript files without parameters. the wait () method immediately runs the Javascript file that was just loaded, with parameters. the wait () method also immediately runs the Javascript file just loaded, but also runs the function specified in the parameter.

Note that you can run multiple $ lab chains at the same time, but they are completely independent and there is no order relationship between them. If you want to ensure that a Javascript file runs after another file, you can only write them in the same chain operation. Only when some scripts are completely irrelevant should you consider dividing them into different $ lab chains, indicating that there is no correlation between them.

Next, rewrite requirejs:

<SCRIPT src = "require. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">

Require ([

"Script1.js ",
"Script2-a.js ",
"Script2-b.js ",
"Script3.js"

],

Function (){

Initscript1 ();
Initscript2 ();
Initscript3 ();

}

);

</SCRIPT>

Require () accepts two parameters. The first array represents the Javascript file to be loaded, and the second is the callback function to be run after loading. The native require () does not support loading in order. Therefore, you cannot know which of the four JavaScript files to load first. Require () only ensures that after all the four files are loaded, to run the specified callback function.

If loading in order is important to you, you can use the order plug-in officially provided.

Source: http://www.ruanyifeng.com/blog/2011/10/javascript_loading.html

 

Add:

$ Lab. Script ('../jquery-1.4.4.min.js'). Wait (). Script ('1. js'). Wait (function (){
M2 ();
}). Script ('2. js'). Wait (function (){
M2 ();
}); // The todo wait () is empty and is used to display the order before and after execution.

*/

/* Execution sequence
1
1. js start: 100
2
2. js start: 200
*/

Comparison:

$ Lab. Script ('../jquery-1.4.4.min.js'). Wait (). Script ('2. js'). Wait (function (){
M2 ();
Alert ("scripts 1-3 are loaded! ");
// Todo Ie can block subsequent 1. js execution. After alert is disabled, the later 1. js will be loaded. But FF won't stop it.
}). Script ('1. js'). Wait (function (){
M2 ();
});
/* Execution sequence
2
2. js start: 200
1
1. js start: 100
*/