Prinzipielle Analyse: Schritt 1: Verwenden Sie DOM, um <script>- oder <link>-Tags zu erstellen, und fügen Sie ihnen Attribute hinzu, z. B. Typ. Schritt 2: Verwenden Sie die appendChild-Methode, um das Tag an ein anderes Tag zu binden, normalerweise an <head > .Anwendung
:
1. Verbessern Sie die Wiederverwendung von Code und reduzieren Sie die Codemenge.
2. Das Hinzufügen eines Javascript-Controllers und einer Sitzung kann den Seitenstil dynamisch ändern.
3. Da die Seite Dateien nacheinander von oben nach unten lädt und sie gleichzeitig lädt, erklärte Bian: So können Sie einen Javascript-Controller hinzufügen, um die Ladereihenfolge von Seitendateien zu steuern, z. B. zuerst die CSS-Layoutdatei zu laden, dann die CSS-Verschönerungsdatei mit Bildern anzuzeigen und dann die große Falsh-Datei zu laden oder entsprechend der Wichtigkeit zu laden Inhalt.
Lesetipp: Anfänger, die nicht gut im E-Schreiben sind, können Chinesisch direkt lesen, dann den Code kopieren und ausprobieren.
Um eine .js- oder .css-Datei dynamisch zu laden, bedeutet das kurz gesagt, mit DOM-Methoden zunächst ein schickes neues „Skript“- oder „LINK“-Element zu erstellen, ihm die entsprechenden Attribute zuzuweisen und schließlich element.appendChild() zu verwenden. das Element an der gewünschten Stelle im Dokumentenbaum hinzuzufügen. Das klingt viel ausgefallener, als es wirklich ist:
Hier ist das Zitat:
Funktion Loadjscssfile(Dateiname, Dateityp){
if (filetype=="js"){ //Bestimmen Sie den Dateityp
var fileref=document.createElement('script')//Tag erstellen
fileref.setAttribute("type","text/javascript")//Definieren Sie den Wert des Attributtyps als text/javascript
fileref.setAttribute("src", filename)//Die Adresse der Datei
}
else if (filetype=="css"){ //Dateityp bestimmen
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", Dateiname)
}
if (typeof fileref!="undefiniert")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //Der Browser lädt die Datei dynamisch, wenn die Seite geöffnet wird.
loadjscssfile("javascript.php", "js") // Der Browser lädt dynamisch „javascript.php“, wenn die Seite geöffnet wird.
loadjscssfile("mystyle.css", "css") // Der Browser lädt die .css-Datei dynamisch, wenn die Seite geöffnet wird.
Die nächste Aufgabe besteht darin, an das <head>-Tag zu binden. Ein Problem beim Binden besteht darin, dass dieselbe Datei möglicherweise zweimal gebunden wird. Es gibt keine Ausnahme, wenn der Browser zweimal gebunden ist, aber die Effizienz ist gering. Um
diese Situation zu vermeiden, können wir eine neue globale Array-Variable hinzufügen und den Namen der gebundenen Datei darin speichern. Überprüfen Sie vor jeder Bindung, ob sie bereits vorhanden ist existiert nicht, binden Sie es.
Hier ein Zitat:
document.getElementsByTagName("head")[0].appendChild(fileref)
Indem Sie zuerst auf das HEAD-Element der Seite verweisen und dann appendChild() aufrufen, bedeutet dies, dass das neu erstellte Element ganz am Ende des HEAD-Tags hinzugefügt wird. Darüber hinaus sollten Sie sich darüber im Klaren sein, dass beim Hinzufügen kein vorhandenes Element beschädigt wird neues Element – das heißt, wenn Sie „loadjscssfile(“myscript.js“, „js“) zweimal aufrufen, erhalten Sie jetzt zwei neue „script“-Elemente, die beide auf dieselbe Javascript-Datei verweisen. Dies ist nur aus einer Effizienzgesichtspunkt, da Sie der Seite redundante Elemente hinzufügen und dabei unnötigen Browserspeicher verbrauchen. Eine einfache Möglichkeit, zu verhindern, dass dieselbe Datei mehr als einmal hinzugefügt wird, besteht darin, die von loadjscssfile() hinzugefügten Dateien zu verfolgen. und laden Sie eine Datei nur, wenn sie neu ist:
Das Folgende ist ein zitiertes Fragment:
var filesadded="" //Array-Variable mit gebundenen Dateinamen speichern
Funktion checkloadjscssfile(Dateiname, Dateityp){
if (filesadded.indexOf("["+filename+"]")==-1){//indexOf bestimmt, ob ein Element im Array vorhanden ist
Loadjscssfile(Dateiname, Dateityp)
filesadded+="["+filename+"]" //Den Dateinamen zu filesadded hinzufügen
}
anders
alarm("Datei bereits hinzugefügt!")//Prompt, wenn sie bereits existiert
}
checkloadjscssfile("myscript.js", "js") //Erfolg
checkloadjscssfile("myscript.js", "js") //redundante Datei, daher wird die Datei nicht hinzugefügt
Hier überprüfe ich nur grob, ob eine Datei, die hinzugefügt werden soll, bereits in der Liste der hinzugefügten Dateinamen vorhanden ist, die in der Variable „filesadded“ gespeichert sind, bevor ich entscheide, ob ich fortfahren möchte oder nicht.
Manchmal kann es aber erforderlich sein, dass die
Datei hinzugefügt wirdSie entfernen oder ersetzen tatsächlich eine hinzugefügte .js- oder .css-Datei. Mal sehen, wie das als nächstes gemacht wird.