Dynamisch JS -Funktionen laden
Wenn wir eine JS -Datei laden müssen, verwenden wir im Allgemeinen Skript -Tags, um sie zu implementieren, ähnlich wie der folgende Code:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript" src = "example.js"> </script>
Die Verwendung von Skript -Tags zum direkten Laden von JS -Dateien hat jedoch die folgenden Nachteile:
1. Strenge Lesereihenfolge. Da der Browser JavaScript -Dateien in der Reihenfolge liest, in der <script> auf der Webseite angezeigt wird und sie dann sofort ausführt. Wenn mehrere Dateien voneinander abhängen, muss die Datei mit der geringsten Abhängigkeit vorne platziert werden, und die Datei mit der größten Abhängigkeit muss am Ende platziert werden, andernfalls meldet der Code einen Fehler.
2. Leistungsprobleme. Der Browser verwendet "Synchronmodus", um das <skript> -Tag zu laden, dh die Seite "blockieren", und wartet darauf, dass die JavaScript -Datei geladen wird, und führt dann den nachfolgenden HTML -Code aus. Wenn mehrere <Script> -Tags vorhanden sind, kann der Browser nicht gleichzeitig lesen. Eine muss vor dem Lesen gelesen werden, was zu einer großen Erweiterung der Lesezeit führt und die Seitenantwort langsam ist.
Zu diesem Zeitpunkt werden wir uns dynamisch vorstellen, JS zu laden. Die Implementierungsmethode zum dynamischen Laden von JS ähnelt dem folgenden Code
Die Codekopie lautet wie folgt:
/*
*@desc: Dynamisch Skript hinzufügen
*@Param SRC: Die Adresse der geladenen JS -Datei
*@Param Callback: Die Rückruffunktion, die aufgerufen werden muss, nachdem die JS -Datei geladen wurde
*@Demo:
adddynamicStyle ('http://webresource.c-crip.com/code/cquery/labjs/lab.js', function () {
alert ('lab.js auf dem ctrip Server laden ist abgeschlossen'))
});
*/
Funktion 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! = undefiniert) {
script.onload = function () {
callback ();
}
}
}
Dies führt nicht zu einer Blockierung der Seitenblockade, führt jedoch zu einem weiteren Problem: Die auf diese Weise geladene JavaScript-Datei befindet sich nicht in der ursprünglichen DOM-Struktur, sodass die im DOM-ready (domcontent) angegebene Rückruffunktion und das Ereignis des Fensters.
Zu diesem Zeitpunkt werden wir uns vorstellen, einige externe Funktionsbibliotheken zu verwenden, um JS -Ladeprobleme effektiv zu verwalten.
Gehen wir zum Hauptthema und sprechen wir über Lab.js
Lab.js
Wenn wir herkömmliche Methoden zum Laden von JS verwenden, wird der von uns geschriebene Code im Allgemeinen den Stil im folgenden Code angezeigt.
Die Codekopie lautet wie folgt:
<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>
Wenn wir Lab.js verwenden, um die obige Codefunktion zu implementieren, verwenden wir die folgende Methode
Die Codekopie lautet wie folgt:
<!-Laden Sie die Laborbibliothek zuerst->
<script src = "http://webresource.c-crip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javaScript">
$ Lab
.Script ("aaa.js"). Wait () // Die .wait () -Methode ohne Parameter bedeutet, dass die JavaScript -Datei gerade sofort geladen wird
.Script ("BBB-A.js")
.Script ("BBB-B.JS") // laden aaa.js bbb-a.js bbb-b.js und dann initaaa initbbb ausführen
.wait (function () {// Die .wait () -Methode mit Parametern werden auch sofort die gerade geladene JavaScript -Datei ausgeführt, aber auch die in den Parametern angegebene Funktion ausführt.
initaaa ();
initbbb ();
})
.Script ("ccc.js") // ccc.js laden und die Initccc -Methode nach dem Laden von ccc.js ausführen
.wait (function () {
initccc ();
});
</script>
Gleichzeitig können mehrere $ Lab -Ketten ausgeführt werden, aber sie sind völlig unabhängig und es gibt keine Auftragsbeziehung. Wenn Sie sicherstellen möchten, dass eine JavaScript -Datei nach einer anderen Datei ausgeführt wird, können Sie sie nur in derselben Kettenoperation schreiben. Nur wenn bestimmte Skripte völlig nichts miteinander zu tun haben, sollten Sie in Betracht ziehen, sie in verschiedene $ Lab -Ketten aufzuteilen, was darauf hinweist, dass es keine Korrelation zwischen ihnen gibt.
Allgemeine Nutzungsbeispiele
Die Codekopie lautet wie folgt:
$ Lab
.Script ("script1.js") // script1, script2 und script3 hängen nicht voneinander ab und können in beliebiger Reihenfolge ausgeführt werden
.Script ("script2.js")
.Script ("script3.js")
.wait (function () {
alarm ("Skripte 1-3 sind geladen!");
})
.Script ("script4.js") // Sie müssen warten, bis Skript1.js, script2.js, script3.js vor der Ausführung ausgeführt werden soll
.wait (function () {script4Func ();});
Die Codekopie lautet wie folgt:
$ Lab
.Script ("script.js")
.Script ({src: "script1.js", Typ: "text/javaScript"})
.Script (["script1.js", "script2.js", "script3.js"])
.Script (function () {
// Unter der Annahme von `_is_ie` definiert von Host -Seite als wahr und in anderen Browsern falsch und falsch
if (_is_ie) {
zurück "ie.js"; // Nur wenn in IE dieses Skript geladen wird
}
anders {
null zurückkehren; // Wenn nicht in IE, wird dieser Skript -Anruf effektiv ignoriert
}
})
LAB.JS Ladeinformationen in der Konsole anzeigen
Wenn Sie jede JS -Ladeinformation auf die Konsole debuggen oder anzeigen möchten, können Sie die Methode $ Lab.SetGlobAldefaults verwenden. Weitere Informationen finden Sie im Codebeispiel.
Die Codekopie lautet wie folgt:
<!-Laden Sie die Laborbibliothek von Ctrip zuerst und laden Sie es online herunter->
<script type = "text/javascript" src = "http://webresource.c-crip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </script>
<script type = "text/javaScript">
$ Lab.SetGlobAlDefaults ({Debugg: True}) // Debugging Öffnen
$ Lab
// die erste Ausführungskette
.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'))
// die zweite Ausführungskette
.wait (function () {
//console.log(window.$)
//console.log(window._)
})
// die dritte Ausführungskette
.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'))
// die vierte Ausführungskette
.wait (function () {
// console.log (Plugin1function)
// Console.log (Plugin2Function)
})
// die fünfte Ausführungskette
.Script ('JS/aaa.js')
.Script ('js/bbb.js')
// die sechste Ausführungskette
.wait (function () {
// console.log (modul1function)
// console.log (Modul2Function)
})
</script>
Öffnen Sie zu diesem Zeitpunkt die Konsole und schauen Sie sich die Informationen an, wie in der folgenden Abbildung gezeigt:
Ich glaube, Sie werden über die Debugging -Funktion von Lab.js erstaunt sein, wenn Sie dies sehen. Tatsächlich ist Lab.js in der Tat ziemlich mächtig, und ich verstehe nur einige seiner einfachen Merkmale. Schreiben Sie es zuerst auf und teilen Sie es mit. Es ist auch für die Bequemlichkeit Ihrer Zukunft in Zukunft.