Hinweise zur erstmaligen Verwendung von Lab.js_Javascript-Kenntnisse

Dynamisches Laden von JS-Funktionen

Wenn wir js-Dateien laden müssen, verwenden wir im Allgemeinen Skript-Tags, ähnlich dem folgenden Code:

Code kopieren Der Code lautet wie folgt:

Die direkte Verwendung von Skript-Tags zum Laden von JS-Dateien hat jedoch die folgenden Nachteile:

1. Strikte Lesereihenfolge. Da der Browser Javascript-Dateien in der Reihenfolge liest, in der

2. Leistungsprobleme. Der Browser verwendet den „synchronen Modus“, um das <script>-Tag zu laden, was bedeutet, dass die Seite „blockiert“ wird und auf das Laden der JavaScript-Datei wartet, bevor der nachfolgende HTML-Code ausgeführt wird. Wenn mehrere <script>-Tags vorhanden sind, kann der Browser diese nicht gleichzeitig lesen. Er muss eines lesen, bevor er das andere liest, was dazu führt, dass sich die Lesezeit erheblich verlängert und die Seitenreaktion langsam ist. </p> <p>Zu diesem Zeitpunkt werden wir über das dynamische Laden von JS nachdenken. Die Implementierungsmethode zum dynamischen Laden von JS ähnelt dem folgenden Code</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="44841" class="copybut" id="copybut44841" onclick="doCopy('code44841')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code44841"> <br> /*<br> *@desc: Skript dynamisch hinzufügen<br> *@param src: Die Adresse der geladenen js-Datei <br> *@param Rückruf: Die Rückruffunktion, die aufgerufen werden muss, nachdem die js-Datei geladen wurde<br> *@demo:<br> addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {<br> Alert('lab.js auf Ctrip-Server wird geladen')<br> });<br> */<br> Funktion 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 (Rückruf != undefiniert) {<br>           script.onload = function () {<br>              callback();<br> }<br> }<br> }<br> </div> <p>Dies führt nicht zum Blockieren der Seite, verursacht jedoch ein anderes Problem: Die auf diese Weise geladene Javascript-Datei befindet sich nicht in der ursprünglichen DOM-Struktur, sodass die im DOM-ready-Ereignis (DOMContentLoaded) und in window.onload angegebenen Rückruffunktionen nicht vorhanden sind Ereignis Hat keine Auswirkung darauf. </p> <p>Zu diesem Zeitpunkt werden wir darüber nachdenken, einige externe Funktionsbibliotheken zu verwenden, um JS-Ladeprobleme effektiv zu verwalten. </p> <p><strong>Kommen wir zum Punkt und sprechen wir über LAB.js</strong></p> <p>LAB.js</p> <p>Wenn wir die traditionelle Methode zum Laden von js verwenden, sieht der geschriebene Code im Allgemeinen wie im folgenden Code gezeigt aus. <br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="22815" class="copybut" id="copybut22815" onclick="doCopy('code22815')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code22815"> <br> <script src="aaa.js"></script>

Wenn wir LAB.js verwenden, verwenden Sie zum Implementieren der obigen Codefunktion die folgende Methode

Code kopieren Der Code lautet wie folgt:

Mehrere $LAB-Ketten können gleichzeitig ausgeführt werden, sie sind jedoch völlig unabhängig und es besteht keine Auftragsbeziehung. Wenn Sie sicherstellen möchten, dass eine JavaScript-Datei nach der anderen ausgeführt wird, können Sie sie nur in derselben Kettenoperation schreiben. Nur wenn bestimmte Skripte völlig unabhängig voneinander sind, sollten Sie darüber nachdenken, sie in verschiedene $LAB-Ketten aufzuteilen, was darauf hinweist, dass zwischen ihnen keine Korrelation besteht.

Allgemeine Anwendungsbeispiele

Code kopieren Der Code lautet wie folgt:

$LAB
.script("script1.js") // script1, script2 und script3 sind nicht voneinander abhängig und können in beliebiger Reihenfolge ausgeführt werden
.script("script2.js")
.script("script3.js")
.wait(function(){
alarm("Skripte 1-3 werden geladen!");
})
.script("script4.js") //Sie müssen vor der Ausführung warten, bis script1.js, script2.js, script3.js abgeschlossen sind
.wait(function(){script4Func();});

Code kopieren Der Code lautet wie folgt:

$LAB
.script("script.js")
.script({ src: "script1.js", type: "text/javascript" })
.script(["script1.js", "script2.js", "script3.js"])
.script(function(){
// unter der Annahme, dass „_is_IE“ durch die Hostseite im IE als „true“ und in anderen Browsern als „false“ definiert wird
Wenn (_is_IE) {
           return „ie.js“; // nur wenn im IE, wird dieses Skript geladen
}
sonst {
          return null; // wenn nicht im IE, wird dieser Skriptaufruf effektiv ignoriert
}
})

Sehen Sie sich die Ladeinformationen von LAB.js in der Konsole an

Wenn Sie die Ladeinformationen der einzelnen js auf der Konsole debuggen oder anzeigen möchten, können Sie die Methode $LAB.setGlobalDefaults für die spezifische Verwendung verwenden.

Code kopieren Der Code lautet wie folgt:

Öffnen Sie zu diesem Zeitpunkt die Konsole und sehen Sie sich die Informationen an, wie unten gezeigt:

Ich glaube, Sie werden von der Debugging-Funktion von Lab.js begeistert sein, wenn Sie das sehen. Tatsächlich ist Lab.js ziemlich leistungsfähig und ich verstehe nur einige seiner oberflächlichen Funktionen. Schreiben Sie es zuerst auf und teilen Sie es für Ihre eigene Bequemlichkeit in der Zukunft.