JavaScript file loading: Introduction to LABJS and Requirejs

Traditionally, loading JavaScript files is the use of <script> tags.

Just like the following:

<script type= "Text/javascript" src= "Example.js" ></script>

<script> tags are convenient, the browser will read and run as long as you join the Web page. However, it has some serious flaws.

(1) Strict reading order. Because browsers read JavaScript files in the order in which they appear in the Web page <script>, then run immediately, resulting in multiple files dependent on each other, the least dependent file must be placed at the front, the most dependent file must be on the last side, otherwise the code will complain.

(2) Performance problems. The browser uses "sync mode" to load <script> tag, that is, the page will "jam" (blocking), wait for the JavaScript file to load, and then run the following HTML code. When there are multiple <script> tags, the browser can not read at the same time, you must read one to read the other, resulting in a large reading time, 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 idea is that the browser creates a <script> tag instantly, and then "asynchronously" reads the JavaScript file. This does not cause the page to jam, but it creates another problem: the JavaScript file that is loaded is not in the original DOM structure, Therefore, the callback function specified in the Dom-ready (domcontentloaded) and window.onload events is not valid for it.

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/

External function Libraries Labjs and REQUIREJS can help us manage JavaScript loads more efficiently.

The following is a simple example, based on ScriptJunkie's article, to illustrate the basic usage of these two 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>

This code, in turn, loads 4 JavaScript files: script1.js, Script2-a.js, Script2-b.js, and Script3.js. After loading the first three files, run two functions initScript1 () and InitScript2 (), and then run function initScript3 () after loading the fourth file.

Next, rewrite it with LABJS:

<script src= "Lab.js" ></script>
    
<script type= "Text/javascript" >
    
$LAB
    
. Script (" Script1.js "). Wait ()
    
. Script (" Script2-a.js ")
    
. Script (" Script2-b.js ")
    
. Wait (function () {
    
INITSC　　　　　RIPT1 ();
    
InitScript2 ();
    
)
    
. Script ("Script3.js")
    
. Wait (function () {
    
initScript3 ();
    
});
    
</script>