Verwenden Sie headjs zum Verwalten und Laden von js, um die Ladegeschwindigkeit der Website zu verbessern

Es gibt viele ausgereifte js-Modullader wie requirejs und seajs, aber für einige kleine Projekte sind ihre Funktionen möglicherweise zu „leistungsstark“. Vielleicht möchten wir nur einen, der js-Funktionen dynamisch laden kann, vielleicht möchten wir nur so tun dass die Seite, die wir schreiben, nicht viele Dinge wie enthält. Die beiden zuvor erwähnten JS-Loader betonen die Modularität, dh die Organisation und Verwaltung von JS-Dateien, und eignen sich besser für große Projekte.

Wie ich gerade sagte, ich möchte nur einen JS-Dateilader haben und muss ihm nur die Adresse einer JS-Datei bereitstellen? Geben Sie dann unser Thema ein und verwenden Sie headjs. headjs ist eigentlich ein vollständiger Satz von Tools, aber ich möchte nur die Javascript-Loader-Funktion vorstellen. Das Folgende ist die grundlegende Verwendung:

head.js("/path/to/file.js");

Die einfachste Verwendung besteht darin, ihm die Adresse einer js-Datei als bereitzustellen Parameter, und dann wird es still und nicht blockierend hinter den Kulissen geladen. Wann es geladen und verfügbar sein wird, weiß niemand.

head.js("/path/to/file.js", function() {
 /*js加载完成*/
});

Die einfachste Verwendung bietet neben der Bereitstellung eines Adressparameters auch eine Rückruffunktion als zweiten Parameter. Nachdem das JS geladen wurde, wird die Rückruffunktion aufgerufen. Sie können den Code schreiben, der vom JS in der Rückruffunktion abhängt.

head.js("file1.js", "file2.js", ... "fileN.js");

Geben Sie mehrere js-Dateiadressen an, diese js werden ausgeführt paralleles Laden, aber diese Dateien werden in der durch die Parameter angegebenen Reihenfolge ausgeführt. Selbst wenn beispielsweise file2.js vor file1.js geladen wird, wird gewartet, bis file1.js geladen und ausgeführt wird.

head.js("file1.js", "file2.js", function() {
  
});

Laden Sie mehrere Js parallel und führen Sie sie in Parameterreihenfolge aus. Wenn alle Js bereit sind, wird die Rückruffunktion ausgeführt.

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

Mehrere js werden parallel geladen, und wer es zuerst lädt, wird zuerst ausgeführt

head.js("file1. js ").js("file1.js").js("file3.js");

Kettenaufrufmethode der vorherigen Methode

In diesem Fall verwenden Sie headjs, um die zu laden js-Datei Es reicht im Grunde aus und kann auch Abhängigkeiten verarbeiten. Wenn Sie weiterhin B installieren und eine Website erstellen, in der Hoffnung, alle Spezialeffekte nutzen zu können, finden Sie hier ein JQuery-Plug-In und dort ein anderes. Kurz gesagt, Sie werden viele Dateien mit komplexen Abhängigkeiten erstellen. Was passiert? verwalten? Gibt es einen Grund zu fragen? Die oben genannten Verwendungen können das Problem vollständig lösen. Aber dann habe ich darüber nachgedacht, da ich B installiert habe, lasst es uns bis zum Ende installieren. Jetzt ist es kein beliebtes Modul oder so, also installieren wir das gesamte Modul, aber es ist nicht so kompliziert, wie commonJS gesagt hat, das heißt, ein Modul zu definieren , und legen Sie dann fest, dass dieses Modul Folgendes hat: Woraus bestehen die js-Dateien, welche Abhängigkeiten bestehen zwischen ihnen usw. Dann lass es uns tun. Headjs verwendet das MTI-Protokoll. Es sollte kein Problem sein, es zu ändern. Diaosi gibt vor, wieder groß, reich und gutaussehend zu sein. Tatsächlich handelt es sich um eine Modifikation, aber es ist besser zu sagen, dass es ein paar Codeteile hinzufügt und Funktionen wie das Laden von Abhängigkeiten vollständig mithilfe der headjs-API implementiert.

Hier habe ich zwei neue Methoden zu headjs hinzugefügt. Eine davon ist add(name, file, preload), um ein Modul hinzuzufügen. Der Parametername ist der Modulname und file ist die zu verwendende js-Dateiadresse. Wenn mehrere Dateien vorhanden sind und Abhängigkeiten bestehen, kann die Datei ein Array sein. Die Elemente in diesem Array sind die verwendeten Dateiadressen, und Abhängigkeiten werden in der Reihenfolge der Array-Elemente ausgeführt. Der dritte Parameter preload wird verwendet, um anzugeben, ob die Moduldatei vorab geladen werden soll. Wenn er „false“ ist, wird die Datei geladen, wenn das Modul verwendet wird Der Standardwert ist false

Der andere ist use(name, callback), diese Methode wird verwendet, um Module zu verwenden. Name ist der Modulname, der mit der Methode add() definiert wurde, und Callback ist die Callback-Funktion, die nach dem Laden des Moduls aufgerufen wird.

So können wir Headjs wie folgt verwenden:

head.add('jqueryui',[jquery.js,jqueryui.js]);//定义模块
head.use('jqueryui',function(){
 //可以使用jqueryui啦
});

Wenn es viele Module gibt, kann der Moduldefinitionscode separat geschrieben werden In einer Datei wird nach der Einführung von headjs sofort die Moduldefinitionsdatei geladen. Dieser Prozess kann einfach wie folgt implementiert werden:

Siehe das Init-Attribut Nein, ich Nennen Sie es das Initialisierungsattribut. Der Wert von init repräsentiert beispielsweise den Dateinamen init.js im selben Verzeichnis wie headjs. Die sogenannte Initialisierung bedeutet, dass vor der Verwendung von use() die Init-Datei geladen werden muss. So können Sie die Moduldefinition in die Initialisierungsdatei schreiben.

Nima, was ist das für ein Problem? Ein weiteres Hauptmerkmal, okay, ich gebe zu, dass ich gesehen habe, dass jemand anderes dieses Ding hatte, also bin ich dem Beispiel gefolgt und habe mir auch eines besorgt. Das Hauptattribut stellt den Modulnamen dar. Nach dem Laden der Dateien head.js und init.js wird das durch das Hauptattribut angegebene Modul automatisch ausgeführt (natürlich muss das Modul zuerst in init definiert werden). Mit diesen beiden Dingen können wir also sehr komplexen Code ohne einen einzigen JS-Code auf der Seite ausführen (mit Ausnahme des Tags, das headjs einführt).

Es gibt noch einen weiteren Punkt, der erklärt werden muss, nämlich den Speicherort der Moduldateien. Die Moduldatei sollte im selben Verzeichnis wie head.js gespeichert werden, z. B. head.add('a','a.js'). Der Pfad von a.js ist hier derselbe wie head.js Pfad der Moduldatei. Er ist relativ zum Pfad, in dem head.js gespeichert ist, und kann nur nach unten, nicht nach oben gehen, zum Beispiel:

head.add('a','a/a. js')//Richtig

head.add('a','../a.js')//Fehler, kann nicht nach oben positioniert werden

Zum Schluss den geänderten Kopf einfügen. js-Quelldatei. Es handelt sich nicht um eine komprimierte Version, es gibt Kommentare zu den Änderungen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist. Ich hoffe auch, die PHP-Chinese-Website zu unterstützen.

Weitere Artikel über die Verwendung von HeadJS zum Verwalten und Laden von JS und zum Verbessern der Ladegeschwindigkeit von Websites finden Sie auf der chinesischen PHP-Website!