Lab.js First Use notes _javascript tips

Dynamically loading JS functions

Generally, when we need to load the JS file, we use the script tag to implement it, similar to the following code:

Copy Code code as follows:

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

But using the script tag directly to load the JS file can have some of the following drawbacks:

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.

This time we will think to dynamically load JS, dynamic load JS implementation method similar to the following code

Copy Code code as follows:

/*
* @desc: Dynamically adding script
* @param src: Address of loaded JS file
* @param callback : The callback function that needs to be invoked after the completion of the JS file loading
* @demo:
Adddynamicstyle (' Http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js ', function () {
    alert (' Lab.js load complete on the Ctrip server ')
});
*/
Function Adddynamicjs (SRC, callback) {
    var script = document.createelement ("Script" );
    script.setattribute ("type", "Text/javascript");
    script.src = src[i];
    script.charset = ' gb2312 ';
    document.body.appendChild (script);
    if (callback!= undefined) {
        script.onload = func tion () {
            callback ();
       }
   }
}

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.

This time we will think of using some external function library to effectively manage the JS load problem.

Let's get down to business, Lab.js.

Lab.js

If we use the traditional method to load JS, the written code will typically look like the style shown in the code below.

Copy Code code as follows:

<script src= "Aaa.js" ></script>
<script src= "Bbb-a.js" ></script>
<script src= "Bbb-b.js" ></script>
<script type= "Text/javascript" >
INITAAA ();
INITBBB ();
</script>
<script src= "Ccc.js" ></script>
<script type= "Text/javascript" >
INITCCC ();
</script>

If we use lab.js, to implement the above code functionality, use the following method

Copy Code code as follows:

<!--first load Lab.js library-->
<script src= "Http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" ></script>
<script type= "Text/javascript" >
$LAB
. Script ("Aaa.js"). Wait ()//Wait () method without parameters means to run the JavaScript file just loaded immediately
. Script ("Bbb-a.js")
. Script ("Bbb-b.js")//Load Aaa.js bbb-a.js bbb-b.js then execute initaaa initbbb
The. Wait (function () {//with parameters. Wait () method is also to run the JavaScript file just loaded immediately, but also run the function specified in the parameter.
INITAAA ();
INITBBB ();
})
. Script ("Ccc.js")//Reload Ccc.js load Completion ccc.js Execute INITCCC method
. Wait (function () {
INITCCC ();
});
</script>

Multiple $lab chains can be run at the same time, but they are completely independent and have no order relationships. If you want to make sure 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.

General usage Examples

Copy Code code as follows:

$LAB
. Script ("Script1.js")//SCRIPT1, SCRIPT2, and SCRIPT3 are mutually independent and can be executed in any order
. Script ("Script2.js")
. Script ("Script3.js")
. Wait (function () {
Alert ("Scripts 1-3 are loaded!");
})
. Script ("Script4.js")//must wait for script1.js,script2.js,script3.js execution to complete
. Wait (function () {Script4func ();});

Copy Code code as follows:

$LAB
. Script ("Script.js")
. Script ({src: "script1.js", type: "Text/javascript"})
. Script (["Script1.js", "Script2.js", "Script3.js"])
. Script (function () {
Assuming ' _is_ie ' defined by host page as True with IE and false in the other browsers
if (_is_ie) {
return "Ie.js"; Only if in IE, this script would be loaded
}
else {
return null; If not in IE, this script call'll effectively be ignored
}
})

Look at the Lab.js loading information at the console

If you want to debug or say in the console to see the various JS loading information, you can use the $lab.setglobaldefaults method, the specific use of the code example.

Copy Code code as follows:

<!--loading Ctrip's lab library lab.js can also be downloaded on the Web-->
<script type= "Text/javascript" src= "Http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset= "gb2312" ></script>

<script type= "Text/javascript" >

$LAB. Setglobaldefaults ({debug:true})//Turn on debugging

$LAB
First chain of execution
. Script (' Http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js ')
. Script (' Http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js ')

Second execution chain
. Wait (function () {
Console.log (window.$)
Console.log (Window._)
})

Third execution chain
. Script (' Http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js ')
. Script (' Http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js ')

Fourth chain of execution
. Wait (function () {
Console.log (plugin1function)
Console.log (plugin2function)
})

Fifth chain of execution
. Script (' Js/aaa.js ')
. Script (' Js/bbb.js ')

Sixth chain of execution
. Wait (function () {
Console.log (module1function)
Console.log (module2function)
})
</script>

This time, open the console and look at the information as shown in the following image:

I'm sure you'll be amazed at the Lab.js debugging features you see here. In fact, Lab.js is really powerful, and I just understand some of its obvious features. Write it down, share it, and make it easy for yourself later.