Notes on using Lab.js for the first time_javascript skills

Dynamic loading of JS functions

Generally, when we need to load js files, we will use script tags, similar to the following code:

Copy code The code is as follows:

However, directly using script tags to load js files will have 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 first, and the one with the greatest dependency must be placed first. The file must be placed at the end, otherwise the code will report an error. </p> <p>2. Performance issues. The browser uses "synchronous mode" to load the <script> tag, which means that the page will be "blocked", waiting for the JavaScript file to be loaded before running the subsequent HTML code. When there are multiple <script> tags, the browser cannot read them at the same time. It must read one before reading the other, which causes the reading time to be greatly extended and the page response to be slow. </p> <p>At this time we will think of dynamically loading JS. The implementation method of dynamically loading JS is similar to the following code</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="44841" class="copybut" id="copybut44841" onclick="doCopy('code44841')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code44841"> <br> /*<br> *@desc: Dynamically add script<br> *@param src: The address of the loaded js file <br> *@param callback: The callback function that needs to be called after the js file is loaded<br> *@demo:<br> addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {<br> alert('lab.js on Ctrip server is loaded')<br> });<br> */<br> function addDynamicJS(src, callback) {<br> var script = document.createElement("script");<br> ​ script.setAttribute("type", "text/javascript");<br> ​ script.src = src[i];<br> Script.charset = 'gb2312';<br> Document.body.appendChild(script);<br> If (callback != undefined) {<br>           script.onload = function () {<br>              callback();<br> }<br> }<br> }<br> </div> <p>This will not cause page blocking, but it will cause another problem: the Javascript file loaded in this way is not in the original DOM structure, so the callback functions specified in the DOM-ready (DOMContentLoaded) event and window.onload event Has no effect on it. </p> <p>At this time we will think of using some external function libraries to effectively manage JS loading issues. </p> <p><strong>Let’s get to the point and talk about LAB.js</strong></p> <p>LAB.js</p> <p>If we use the traditional method to load js, the code written will generally be as shown in the code below. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="22815" class="copybut" id="copybut22815" onclick="doCopy('code22815')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code22815"> <br> <script src="aaa.js"></script>