Nutzungsbereich:
Für Informationsmanagementprojekte wie OA, MIS, ERP usw. wird die Website vorerst nicht berücksichtigt.
Probleme auftreten:
Um ein Projekt abzuschließen, müssen Sie häufig auf viele JS -Dateien wie jQuery.js, easyui usw. verweisen. Wie kann der Client den Cache rechtzeitig aktualisieren, wenn sich die Datei ändert? Es wäre sogar noch besser, wenn die Effizienz des Punktbetriebs verbessert werden könnte.
Ziel:
1. Es kann leicht auf JS -Dateien verweisen.
2. Versuchen Sie, verschiedene Caches zu verwenden, um häufige Lektüre von Dateien vom Server zu vermeiden.
3. Wenn die JS -Datei aktualisiert oder hinzugefügt oder reduziert wird, muss der Client in der Lage sein, automatisch und sofort zu aktualisieren.
4. Wiederverwendung von JS -Dateien.
Seitenstruktur:
Im Allgemeinen werden Projekte wie OA und MIS hauptsächlich unter Verwendung von Frameset oder Iframe implementiert, wodurch die Konzepte der übergeordneten Seite und der Kinderseite mitgebracht werden. Wir können dies verwenden, um Aufhebens zu machen.
Webseiten können in drei Teile unterteilt werden: Shell, Homepage, Beschriftung, Datenliste, Formular (hinzufügen, ändern). Da die Methode zum Laden von JS hier diese Seitenstruktur verwenden muss, wird die Website vorerst nicht unterstützt.
Es sieht bekannt vor, dieses Bild zu sehen. Ja, das ist die Struktur.
Text
Wenn es um Webversionsanwendungen geht, stützt sich heutzutage zunehmend auf verschiedene JS wie JQuery, Easyui, My97 usw. sowie verschiedene von mir geschriebene JS. Implementiert werden immer mehr Funktionen, mehr JS müssen verwendet werden, und mehr JS -Dateien werden häufig geändert. Es entstehen so viele Probleme, wie zum Beispiel das Schreiben von <script src = ""> für jede Seite. Das ist zu lästig. Wie viele Seiten müssen Sie ändern, um eine neue JS -Datei hinzuzufügen? Wie aktualisiere ich die JS -Datei sofort? So laden Sie den Client JS schneller. Einige JS -Dateien haben auch Abhängigkeiten. Wie kann ich die Ladereihenfolge sicherstellen? In diesem Artikel geht es darum, meine Lösung zu teilen.
Dynamische Belastung
Es ist offensichtlich problematisch, <Script> zum Laden von JS auf der Seite zu verwenden. Was soll ich also tun? Nachdem ich darüber nachgedacht habe, verwende ich immer noch dynamisches Laden, um es zu lösen. Ich habe auch online gesucht und festgestellt, dass es viele Methoden gibt, einschließlich derjenigen, die von sich selbst geschrieben wurden und die in Frameworks organisierten (z. B. Seejs). Manchmal habe ich immer noch das Gefühl, dass ich einen geschickten darin mache, einen zu machen, also habe ich vor, selbst einen zu schreiben.
Wie laden ich dynamisch? Verwenden der von JQuery bereitgestellten Methode? Dies ist in Ordnung, aber die Seite muss sich auf JQuery und die JS beziehen, die ich geschrieben habe, um die JS -Datei zu laden. Mit anderen Worten, wenn Sie zwei <script> auf eine Seite schreiben müssen, ist dies problematisch. Wenn Sie einen schreiben können, dürfen Sie nicht zwei schreiben. Obwohl es nur noch eins ist, ist es wirklich problematisch, noch einen zu haben. Also entschied ich mich, eine kleine Methode der dynamischen Belastung alleine zu handschreiben.
Was soll ich tun, wenn ich nicht schreiben kann? Tante Baidu kommt und hilft. Nachdem ich alle möglichen Dinge gesucht hatte, fand ich endlich eine relativ ideale Methode, also werde ich das verwenden.
Die Codekopie lautet wie folgt:
/* Funktionen, die dynamisches Laden von JS im Internet implementieren. Nach ein wenig Modifikation kann es mit IE10 */ kompatibel sein
var loadscript =
{
$$: function (id) {return document.getElementById (id); },
Tag: function (element) {return document.getElementsByTagName (Element); },
CE: Funktion (Element) {return document.CreateElement (Element); },
JS: Funktion (URL, Rückruf) {
var s = loadscript.ce ('script');
s.type = "text/javaScript";
S.Src = URL;
if (document.documentMode == 10 || document.documentMode == 9) {
S.onError = S.onload = geladen;
} anders {
S.onReadyStatechange = Ready;
S.onError = S.onload = geladen;
}
loadscript.tag ('head') [0] .AppendChild (s);
function ready () {/*.ie7.0/ie10.0*/
if (S.ReadyState == 'Loaded' || S.ReadyState == 'Complete') {
callback ();
}
}
Funktion geladen () {/*chrome/ie10.0*/
callback ();
}
}
};
Ladereihenfolge
Der neue Code wurde abgeschlossen. Im Folgenden laden Sie andere JS -Dateien. Da es viele Dateien und bestimmte Abhängigkeiten gibt, werde ich darüber nachdenken und ein Wörterbuch aus JS -Dateien erstellen und dann eine Ladereihenfolge erstellen und in dieser Reihenfolge laden.
Um stabiler zu sein, habe ich beschlossen, die Methode zum Laden nach dem anderen zu verwenden, dh ein JS zu laden und dann einen anderen JS zu laden. Dies gewährleistet Abhängigkeiten. Natürlich ist der Nachteil, dass die Ladegeschwindigkeit langsamer ist. Im Allgemeinen können Webseiten mit mehreren JS -Dateien geladen werden, die schneller sein werden.
Verwenden Sie Cache
Im Allgemeinen haben Browser einen Cache für verschiedene Ressourcen (wie Webseiten, Bilder, JS, CSS usw.) und laden sie nicht mehr auf den Server herunter, wenn sie bereits haben. Es scheint gut, aber es gibt zwei Probleme:
A. Wie bestimmt der Browser, ob die zwischengespeicherte JS -Datei die neueste ist?
B. Die JS -Datei wurde aktualisiert. Wie zwinge ich den Browser zum Aktualisieren?
Wie beurteilen der Browser? Ich weiß nicht viel über die spezifischen Schritte, aber ich weiß, dass es einen Schritt gibt, auf den Server zu gehen, um zu fragen, ob die JS -Datei i Cache die neueste ist, und dann kann ich feststellen, ob der lokale Cache der neueste ist. Wenn es das Neueste ist, werde ich mich nicht darum kümmern. Wenn dies nicht der Fall ist, werde ich die neueste herunterladen. Das heißt, auch wenn der Client bereits über einen Cache von JS -Dateien verfügt, muss der Browser bestätigen, ob es sich um die neueste handelt, und geht weiterhin zum Server. Dies ist ein Kampf. Natürlich ist dieser Prozess im Allgemeinen sehr schnell, aber manchmal ist dieser Prozess sehr langsam.
Es ist also besser zu versuchen, JS zu laden. Die "Wiederverwendung von JS -Dateien" wird also eingeführt.
Aktualisieren Sie die JS -Datei
Die JS -Datei wurde aktualisiert, aber der Browser verwendet immer noch die vorherige JS -Datei, da sie zwischengespeichert wurde, und er ist hartnäckig, dass die zwischengestellte JS -Datei die neueste ist. Was soll ich tun?
Der einfachste Weg ist, JS mit einer Versionsnummer zu laden, die dadurch gefolgt ist. Wenn es ein Update gibt, beträgt die Versionsnummer +1. Zum Beispiel xxx.js? V = 1. Nachdem die JS -Datei aktualisiert wurde, ist sie xxx.js? V = 2. Auf diese Weise wird JS definitiv aktualisiert.
Es scheint einfach zu sein, aber wie kann ich diese Versionsnummer hinzufügen? Wie aktualisiere ich die Versionsnummer selbst?
Wiederverwendung
Wir müssen uns zuerst das Bild oben ansehen, nämlich die Seitenstruktur, mit einer Shell -Seite (oder einer Startseite), die wir die übergeordnete Seite nennen. Es gibt mehrere Seiten, die von iFrames geladen wurden, und wir fügen sie zu den Nebenseiten hinzu.
Der allgemeine Ansatz besteht darin, jQuery.js auf der übergeordneten Seite und dann auf der Kinderseite zu laden. Wenn die Unterseite jQuery.js lädt, wird sie natürlich direkt aus dem Cache extrahiert und stört den Server im Allgemeinen nicht mehr.
Warum muss die untergeordnete Seite jedoch erneut geladen werden, da die übergeordnete Seite noch einmal geladen werden muss? Ist es in Ordnung, es direkt in die übergeordnete Seite zu laden? Ich habe online gesucht und niemand schien das zu tun. Vielleicht bin ich zu alternativ, ich möchte diese Methode nur implementieren. Der Vorteil besteht darin, dass alle JS -Dateien auf der übergeordneten Seite geladen werden und die untergeordnete Seite direkt die auf der übergeordneten Seite geladene JS verwendet, sodass die untergeordnete Seite nicht mit den JS -Dateien anlegen muss. Dies kann auch effizienter sein. Selbst wenn Sie den Cache zum Laden verwenden, müssen Sie ein Urteilsvermögen fällen. Wenn dann eine Ladeaktion durchführt, wird es immer noch ein wenig Verlust geben. Je mehr JS -Dateien, desto offensichtlicher wird es.
Wie man es implementiert, erscheint es einfach, darüber nachzudenken.
Verwenden Sie JQuery auf der übergeordneten Seite
Var aa = $ ('div'); // Finden Sie alle Divs auf der übergeordneten Seite
Ist das in der Unterseite möglich?
Var bb = top. $ ('Div'); // Die DIV kann gefunden werden, aber es ist nicht die Div der Kinderseite, sondern die DIV auf der übergeordneten Seite.
Was ist los? Der Grund ist der Suchbereich. JQuery hat drei Parameter. Wir verwenden normalerweise nur den ersten und letzteres wird ignoriert. Was ist der zweite Parameter? Das ist der Suchbereich. Wo wird JQuery suchen, wenn keine angegebenen Angaben vorhanden sind? Suchen Sie auf der Seite, auf der JQuery geladen wird, anstatt auf der Seite zu suchen, auf der $ aufgerufen wird.
Die Lösung ist auch sehr einfach. Fügen Sie einfach einen Parameter hinzu
Var bb = top. $ ('Div', document); // Geben Sie den Suchbereich an: Dokument der Unterseite
Warten Sie, das scheint sehr nervig. Beim Schreiben eines Skripts sollten wir auch überlegen, ob dieses Skript auf der übergeordneten Seite oder auf der Kinderseite ausgeführt wird?
OK, machen Sie ein einfaches Paket, um diese Probleme zu vermeiden. Schreiben Sie eine Funktion in die Unterseite
Die Codekopie lautet wie folgt:
Funktion $ (p1) {
return top. $ (P1, Dokument);
}
OK, ist der Job erledigt? Natürlich nicht! Um vorherzusagen, was als nächstes passiert, hören Sie sich bitte die nächste Aufschlüsselung an.
PS: Vorschau der nächsten Folge. Es ist der spezifische Implementierungscode, und es gibt einige Ideen und Ideen. Ich weiß nicht, ob Sie etwas anderes zu wissen haben. Wenn ja, antworten Sie bitte unten. Danke zuerst.