Analyse du principe : Étape 1 : utilisez DOM pour créer des balises <script> ou <link> et attachez-leur des attributs, tels que le type. Étape 2 : utilisez la méthode appendChild pour lier la balise à une autre balise, généralement à <head >. .Application
:
1. Améliorer la réutilisation du code et réduire la quantité de code ;
2. L'ajout d'un contrôleur et d'une session javascript peut modifier dynamiquement le style de la page
3. Parce que la page charge les fichiers de manière séquentielle de haut en bas et les charge simultanément, a expliqué Bian : vous pouvez donc ajouter un contrôleur javascript pour contrôler l'ordre de chargement des fichiers de page, comme charger d'abord le fichier de mise en page CSS, puis afficher le fichier d'embellissement CSS avec des images, puis charger le gros fichier falsh, ou charger en fonction de l'importance du contenu.
Conseil de lecture : les débutants qui ne sont pas doués en écriture électronique peuvent lire directement le chinois, puis copier le code et l'essayer.
Pour charger un fichier .js ou .css de manière dynamique, en un mot, cela signifie utiliser les méthodes DOM pour créer d'abord un nouvel élément "script" ou "LINK" chic, lui attribuer les attributs appropriés et enfin utiliser element.appendChild() pour ajouter l'élément à l'emplacement souhaité dans l'arborescence du document. Cela semble beaucoup plus sophistiqué qu'il ne l'est en réalité :
Voici la citation :
fonction loadjscssfile(nom de fichier, type de fichier){
if (filetype=="js"){ //Déterminer le type de fichier
var fileref=document.createElement('script')//Créer une balise
fileref.setAttribute("type","text/javascript")//Définir la valeur du type d'attribut comme text/javascript
fileref.setAttribute("src", filename)//L'adresse du fichier
}
else if (filetype=="css"){ //Déterminer le type de fichier
var fileref=document.createElement("lien")
fileref.setAttribute("rel", "feuille de style")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", nom de fichier)
}
si (type de référence de fichier ! = "indéfini")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js", "js") //Le navigateur charge dynamiquement le fichier à l'ouverture de la page.
loadjscssfile("javascript.php", "js") // Le navigateur charge dynamiquement "javascript.php" à l'ouverture de la page.
loadjscssfile("mystyle.css", "css") //Le navigateur charge dynamiquement le fichier .css à l'ouverture de la page.
Le travail suivant consiste à se lier à la balise <head>. Un problème lors de la liaison est que le même fichier peut être lié deux fois. Il n'y aura aucune exception si le navigateur est lié deux fois, mais l'efficacité sera faible. Afin d'éviter
cette situation, nous pouvons ajouter une nouvelle variable de tableau globale et y enregistrer le nom du fichier lié. Avant chaque liaison, vérifiez si elle existe déjà. Si elle existe, il vous indiquera qu'elle existe déjà. n'existe pas, liez-le.
Voici une citation :
document.getElementsByTagName("head")[0].appendChild(fileref)
En faisant d'abord référence à l'élément HEAD de la page, puis en appelant appendChild(), cela signifie que l'élément nouvellement créé est ajouté à la toute fin de la balise HEAD. De plus, vous devez savoir qu'aucun élément existant n'est endommagé lors de l'ajout de la balise HEAD. nouvel élément - c'est-à-dire que si vous appelez loadjscssfile("myscript.js", "js") deux fois, vous vous retrouvez maintenant avec deux nouveaux éléments "script" pointant tous deux vers le même fichier Javascript. Cela ne pose problème qu'à partir d'un. du point de vue de l'efficacité, car vous ajouterez des éléments redondants à la page et utiliserez de la mémoire inutile du navigateur dans le processus. Un moyen simple d'empêcher l'ajout du même fichier plus d'une fois consiste à garder une trace des fichiers ajoutés par loadjscssfile(), et chargez un fichier uniquement s'il est nouveau :
ce qui suit est un fragment cité :
var filesadded="" //Enregistre la variable de tableau qui a des noms de fichiers liés
fonction checkloadjscssfile(nom de fichier, type de fichier){
if (filesadded.indexOf("["+filename+"]")==-1){//indexOf détermine s'il y a un élément dans le tableau
loadjscssfile(nom de fichier, type de fichier)
filesadded+="["+filename+"]" //Ajoute le nom du fichier aux fichiers ajoutés
}
autre
alert("fichier déjà ajouté!")//Demander s'il existe déjà
}
checkloadjscssfile("myscript.js", "js") //succès
checkloadjscssfile("myscript.js", "js") //fichier redondant, donc fichier non ajouté
Ici, je détecte simplement grossièrement si un fichier qui doit être ajouté existe déjà dans une liste de noms de fichiers ajoutés stockés dans des fichiers variables ajoutés avant de décider de continuer ou non.
Ok, continuons, parfois la situation peut l'exiger. vous supprimez ou remplacez en fait un fichier .js ou .css ajouté. Voyons comment cela se fait ensuite.