Fonctions JS de chargement dynamique
D'une manière générale, lorsque nous devons charger un fichier JS, nous utiliserons des balises de script pour l'implémenter, similaire au code suivant:
La copie de code est la suivante:
<script type = "text / javascript" src = "example.js"> </ script>
Cependant, l'utilisation de balises de script pour charger les fichiers JS a directement les inconvénients suivants:
1. Ordre de lecture stricte. Étant donné que le navigateur lit les fichiers JavaScript dans l'ordre dans lequel <Script> apparaît dans la page Web, puis les exécute immédiatement, lorsque plusieurs fichiers dépendent les uns des autres, le fichier avec la moindre dépendance doit être placé à l'avant et que le fichier avec le plus de dépendance doit être placé à la fin, sinon le code rapportera une erreur.
2. Problèmes de performance. Le navigateur utilise "Mode synchrone" pour charger la balise <cript>, c'est-à-dire que la page "bloque", en attendant que le fichier JavaScript soit chargé, puis exécutera le code HTML suivant. Lorsque plusieurs balises <cript> existent, le navigateur ne peut pas lire en même temps. L'une doit être lue avant de lire l'autre, entraînant une grande extension du temps de lecture et la réponse de la page est lente.
Pour le moment, nous penserons à charger dynamiquement JS. La méthode d'implémentation de chargement dynamiquement JS est similaire au code suivant
La copie de code est la suivante:
/ *
* @ desc: ajouter dynamiquement le script
* @ param src: l'adresse du fichier JS chargé
* @ param Callback: la fonction de rappel qui doit être appelée après le chargement du fichier JS
* @ Demo:
adddynamicstyle ('http://webresource.c-ctrip.com/code/cquery/labjs/lab.js', function () {
alert ('lab.js sur le chargement du serveur CTRIP est complet')
});
* /
fonction adddynamicjs (src, rappel) {
var script = document.createElement ("script");
script.setAttribute ("type", "text / javascript");
script.src = src [i];
script.charset = 'gb2312';
document.body.appendChild (script);
if (rappel! = Undefined) {
script.onload = function () {
callback ();
}
}
}
Cela ne provoquera pas le blocage de la page, mais cela entraînera un autre problème: le fichier JavaScript chargé de cette manière n'est pas dans la structure DOM d'origine, donc la fonction de rappel spécifiée dans l'événement DOM-PRETAD (DomContent) et l'événement Window.onload est invalide pour cela.
Pour le moment, nous penserons à utiliser certaines bibliothèques de fonctions externes pour gérer efficacement les problèmes de chargement JS.
Allons sur le sujet principal et parlons de laboratoire
Lab.js
Si nous utilisons des méthodes traditionnelles pour charger JS, le code que nous écrivons aura généralement le style affiché dans le code suivant.
La copie de code est la suivante:
<script src = "aaa.js"> </ script>
<script src = "bbb-a.js"> </scripteur>
<script src = "bbb-b.js"> </ script>
<script type = "text / javascript">
initaaa ();
initbbb ();
</cript>
<script src = "ccc.js"> </ script>
<script type = "text / javascript">
initccc ();
</cript>
Si nous utilisons Lab.js, pour implémenter la fonction de code ci-dessus, nous utilisons la méthode suivante
La copie de code est la suivante:
<! - Chargez la bibliothèque lab.js d'abord->
<script src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js"> </ script>
<script type = "text / javascript">
$ Laboratoire
.script ("aaa.js"). wait () // La méthode .wait () sans paramètres signifie exécuter le fichier javascript qui vient d'être chargé immédiatement
.Script ("bbb-a.js")
.Script ("bbb-b.js") // Charger aaa.js bbb-a.js bbb-b.js puis exécuter initaaa initbbb
.Wait (function () {// La méthode .Wait () avec des paramètres exécute également immédiatement le fichier JavaScript chargé tout à l'heure, mais exécute également la fonction spécifiée dans les paramètres.
initaaa ();
initbbb ();
})
.Script ("ccc.js") // Chargez CCC.JS et exécutez la méthode INITCCC après le chargement de CCC.JS
.Wait (function () {
initccc ();
});
</cript>
Plusieurs chaînes de laboratoires $ peuvent être exécutées en même temps, mais elles sont complètement indépendantes et il n'y a pas de relation de commande. Si vous souhaitez vous assurer qu'un fichier JavaScript s'exécute après un autre fichier, vous ne pouvez les écrire que dans la même opération de chaîne. Ce n'est que lorsque certains scripts sont complètement sans rapport, vous devriez envisager de les diviser en différentes chaînes de laboratoire $, indiquant qu'il n'y a pas de corrélation entre eux.
Exemples d'utilisation générale
La copie de code est la suivante:
$ Laboratoire
.script ("script1.js") // script1, script2 et script3 ne dépendent pas les uns des autres et peuvent être exécutés dans n'importe quel ordre
.script ("script2.js")
.script ("script3.js")
.Wait (function () {
alerte ("Les scripts 1-3 sont chargés!");
})
.script ("script4.js") // Vous devez attendre que Script1.js, script2.js, script3.js soit exécuté avant l'exécution
.Wait (function () {script4func ();});
La copie de code est la suivante:
$ Laboratoire
.script ("script.js")
.script ({src: "script1.js", type: "text / javascript"})
.script (["script1.js", "script2.js", "script3.js"])
.script (function () {
// en supposant `_is_ie` défini par la page de l'hôte comme vrai dans IE et FALSE dans d'autres navigateurs
if (_is_ie) {
retourner "ie.js"; // seulement si dans IE, ce script sera chargé
}
autre {
retourner null; // Sinon dans IE, cet appel de script sera effectivement ignoré
}
})
Voir Lab.js Chargement des informations dans la console
Si vous souhaitez déboguer ou afficher chaque JS de chargement des informations sur la console, vous pouvez utiliser la méthode $ Lab.SetGlobaldefaults. Pour plus de détails, veuillez consulter l'exemple du code.
La copie de code est la suivante:
<! - Chargez d'abord la bibliothèque de laboratoire de CTrip.js et téléchargez-le en ligne->
<script type = "Text / javascript" src = "http://webresource.c-ctrip.com/code/cquery/labjs/lab.js" charset = "gb2312"> </ script>
<script type = "text / javascript">
$ Lab.setglobaldefaults ({debug: true}) // ouvrir le débogage
$ Laboratoire
// la première chaîne d'exécution
.Script ('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.Script ('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
// la deuxième chaîne d'exécution
.Wait (function () {
//console.log(window.$)
//console.log(window._)
})
// la troisième chaîne d'exécution
.script ('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
.Script ('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
// la quatrième chaîne d'exécution
.Wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// la cinquième chaîne d'exécution
.Script ('js / aaa.js')
.Script ('js / bbb.js')
// la sixième chaîne d'exécution
.Wait (function () {
// console.log (module1function)
// console.log (module2function)
})
</cript>
À l'heure actuelle, ouvrez la console et regardez les informations, comme indiqué dans la figure suivante:
Je crois que vous serez étonné de la fonction de débogage de Lab.js lorsque vous le verrez. En fait, Lab.js est en effet assez puissant, et je comprends juste certaines de ses fonctionnalités simples. Écrivez-le d'abord et partagez-le avec. C'est aussi pour la commodité de vous-même à l'avenir.