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. Fügen Sie einen Javascript-Controller und eine Sitzung hinzu, um den Seitenstil dynamisch zu ändern. 3. Da die Seite die Dateien nacheinander von oben nach unten lädt und sie beim Laden erläutert, können Sie einen JavaScript-Controller hinzufügen, um die Ladereihenfolge der Seitendateien zu steuern. Laden Sie beispielsweise zuerst die CSS-Layoutdatei und zeigen Sie dann die CSS-Verschönerungsdatei an mit Bildern. Laden Sie dann die große Falsh-Datei oder laden Sie sie entsprechend der Wichtigkeit des Inhalts. 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. um das Element an der gewünschten Stelle im Dokumentbaum hinzuzufügen. Das hört sich viel ausgefallener an, als es wirklich ist: Hier ein Zitat: loadjscssfile("myscript.js", "js") //Der Browser lädt die Datei dynamisch, wenn die Seite geöffnet wird. In diesem Fall 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 , binde es. Hier ein Zitat: Hier ein Zitat: Ok, weitermachen, manchmal kann es erforderlich sein, dass Sie eine hinzugefügte .js- oder .css-Datei tatsächlich entfernen oder ersetzen.
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"){ //Bestimmen Sie den Dateityp
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("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 wir dieselbe Datei möglicherweise zweimal binden. Es gibt keine Ausnahme, wenn der Browser zweimal gebunden ist, aber die Effizienz ist gering. um zu vermeiden
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 Effizienz Standpunkt, 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 Laden Sie eine Datei nur, wenn sie neu ist:
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 wurde bereits hinzugefügt!")//Prompt, wenn sie bereits vorhanden ist
}
checkloadjscssfile("myscript.js", "js") //Erfolg
checkloadjscssfile("myscript.js", "js") //redundante Datei, daher wurde die Datei nicht hinzugefügt
Hier erkenne ich nur grob, ob eine Datei, die hinzugefügt werden soll, bereits in einer Liste der Namen hinzugefügter Dateien vorhanden ist, die in der Variable „filesadded“ gespeichert sind, bevor ich entscheide, ob ich fortfahren möchte oder nicht.