Dynamically load JS functions
Generally speaking, when we need to load a js file, we will use script tags to implement it, similar to the following code:
The code copy is as follows:
<script type="text/javascript" src="example.js"></script>
However, using script tags to load js files directly has the following disadvantages:
1. Strict reading order. Since the browser reads Javascript files in the order in which <script> appears in the web page and then runs them immediately, when multiple files depend on each other, the file with the least dependency must be placed at the front, and the file with the most dependency must be placed at the end, otherwise the code will report an error.
2. Performance issues. The browser uses "synchronous mode" to load the <script> tag, that is, the page will be "blocking", waiting for the javascript file to be loaded, and then run the subsequent HTML code. When multiple <script> tags exist, the browser cannot read at the same time. One must be read before reading the other, resulting in a large extension of the reading time and the page response is slow.
At this time, we will think of dynamically loading JS. The implementation method of dynamically loading js is similar to the following code
The code copy is as follows:
/*
*@desc: Dynamically add script
*@param src: The address of the loaded js file
*@param callback: The callback function that needs to be called after the js file is loaded
*@demo:
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {
alert('lab.js on Ctrip server loading is complete')
});
*/
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 = function () {
callback();
}
}
}
This will not cause page blockage, but it will cause another problem: the Javascript file loaded in this way is not in the original DOM structure, so the callback function specified in the DOM-ready (DOMContentLoaded) event and the window.onload event is invalid for it.
At this time, we will think of using some external function libraries to effectively manage JS loading problems.
Let's go to the main topic and talk about LAB.js
LAB.js
If we use traditional methods to load js, the code we write will generally have the style shown in the following code.
The code copy is 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 function, we use the following method
The code copy is as follows:
<!--Load the lab.js library first->
<script src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>
<script type="text/javascript">
$LAB
.script("aaa.js").wait()//The .wait() method without parameters means running the Javascript file just loaded immediately
.script("bbb-a.js")
.script("bbb-b.js")//Load aaa.js bbb-a.js bbb-b.js and then execute initAaa initBbb
.wait(function () {//The .wait() method with parameters also immediately runs the Javascript file loaded just now, but also runs the function specified in the parameters.
initAaa();
initBbb();
})
.script("ccc.js")//Load ccc.js and execute the initCcc method after loading ccc.js
.wait(function () {
initCcc();
});
</script>
Multiple $LAB chains can be run at the same time, but they are completely independent and there is no order relationship. 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 certain scripts are completely unrelated, you should consider splitting them into different $LAB chains, indicating that there is no correlation between them.
General usage examples
The code copy is as follows:
$LAB
.script("script1.js") // script1, script2, and script3 are not dependent on each other and can be executed in any order
.script("script2.js")
.script("script3.js")
.wait(function(){
alert("Scripts 1-3 are loaded!");
})
.script("script4.js") //You must wait for script1.js, script2.js, script3.js to be executed before execution
.wait(function(){script4Func();});
The code copy is 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 in IE and false in other browsers
if (_is_IE) {
return "ie.js"; // only if in IE, this script will be loaded
}
else {
return null; // if not in IE, this script call will effectively be ignored
}
})
View LAB.js loading information in the console
If you want to debug or view each js loading information on the console, you can use the $LAB.setGlobalDefaults method. For details, please see the code example.
The code copy is as follows:
<!--Load Ctrip's LAB library lab.js first and download it online->
<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 }) //Open debugging
$LAB
//The first execution chain
.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')
//The second execution chain
.wait(function () {
//console.log(window.$)
//console.log(window._)
})
//The 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')
//The fourth execution chain
.wait(function () {
// console.log(plugin1Function)
// console.log(plugin2Function)
})
//The fifth execution chain
.script('js/aaa.js')
.script('js/bbb.js')
//The sixth execution chain
.wait(function () {
// console.log(module1Function)
// console.log(module2Function)
})
</script>
At this time, open the console and look at the information, as shown in the following figure:
I believe you will be amazed by the debugging function of Lab.js when you see this. In fact, Lab.js is indeed quite powerful, and I just understand some of its simple features. Write it down first and share it with it. It is also for the convenience of yourself in the future.