Cargar dinámicamente las funciones JS
En términos generales, cuando necesitemos cargar un archivo JS, usaremos etiquetas de script para implementarlo, similar al siguiente código:
La copia del código es la siguiente:
<script type = "text/javaScript" src = "ejemplo.js"> </script>
Sin embargo, el uso de etiquetas de script para cargar archivos JS directamente tiene las siguientes desventajas:
1. Orden de lectura estricta. Dado que el navegador lee archivos JavaScript en el orden en el que aparece <script> en la página web y luego los ejecuta inmediatamente, cuando múltiples archivos dependen entre sí, el archivo con la menor dependencia debe colocarse en el frente, y el archivo con la mayor dependencia debe colocarse al final, de lo contrario el código informará un error.
2. Problemas de rendimiento. El navegador usa "modo sincrónico" para cargar la etiqueta <Script>, es decir, la página será "bloquear", esperando que se cargue el archivo JavaScript, y luego ejecute el código HTML posterior. Cuando existen múltiples etiquetas <script>, el navegador no puede leer al mismo tiempo. Uno debe leerse antes de leer el otro, lo que resulta en una gran extensión del tiempo de lectura y la respuesta de la página es lenta.
En este momento, pensaremos en cargar dinámicamente JS. El método de implementación de la carga dinámica JS es similar al siguiente código
La copia del código es la siguiente:
/*
*@Desc: agregar dinámicamente script
*@param src: la dirección del archivo js cargado
*@Param Callback: la función de devolución de llamada que debe llamarse después de cargar el archivo JS
*@manifestación:
addDynamicStyle ('http://webresource.cctrip.com/code/cquery/labjs/lab.js', function () {
alerta ('Lab.js en la carga del servidor Ctrip está completa')
});
*/
función adddynamicjs (src, devolución de llamada) {
var script = document.createElement ("script");
script.setAttribute ("type", "text/javaScript");
script.src = src [i];
script.charset = 'GB2312';
document.body.appendChild (script);
if (Callback! = Undefined) {
script.Onload = function () {
llamar de vuelta();
}
}
}
Esto no causará bloqueo de página, pero causará otro problema: el archivo JavaScript cargado de esta manera no está en la estructura DOM original, por lo que la función de devolución de llamada especificada en el evento DOM-listos (DomContentLoaded) y el evento de ventana.
En este momento, pensaremos en utilizar algunas bibliotecas de funciones externas para administrar efectivamente los problemas de carga JS.
Vayamos al tema principal y hablemos de laboratorio.js
Lab.js
Si usamos métodos tradicionales para cargar JS, el código que escribimos generalmente tendrá el estilo que se muestra en el siguiente código.
La copia del código es la siguiente:
<script src = "aaa.js"> </script>
<script src = "bbb-a.js"> </script>
<script src = "bbb-b.js"> </script>
<script type = "text/javaScript">
indaaaa ();
initbbb ();
</script>
<script src = "ccc.js"> </script>
<script type = "text/javaScript">
initccc ();
</script>
Si usamos Lab.js, para implementar la función de código anterior, usamos el siguiente método
La copia del código es la siguiente:
<!-Cargue la biblioteca Lab.js primero->
<script src = "http://webresource.cctrip.com/code/cquery/labjs/lab.js"> </script>
<script type = "text/javaScript">
$ Laboratorio
.script ("aaa.js"). wait () // El método .wait () sin parámetros significa ejecutar el archivo javaScript acaba de cargar inmediatamente
.script ("bbb-a.js")
.script ("bbb-b.js") // cargar aaa.js bbb-a.js bbb-b.js y luego ejecutar inillaaa initbbb
.wait (function () {// El método .wait () con parámetros también ejecuta inmediatamente el archivo JavaScript cargado ahora, pero también ejecuta la función especificada en los parámetros.
indaaaa ();
initbbb ();
})
.script ("ccc.js") // cargar ccc.js y ejecutar el método initccc después de cargar ccc.js
.wait (function () {
initccc ();
});
</script>
Se pueden ejecutar múltiples cadenas de $ laboratorio al mismo tiempo, pero son completamente independientes y no hay una relación de pedido. Si desea asegurarse de que un archivo JavaScript se ejecute después de otro archivo, solo puede escribirlos en la misma operación de cadena. Solo cuando ciertos scripts están completamente no relacionados, debe considerar dividirlos en diferentes cadenas de laboratorio, lo que indica que no hay correlación entre ellos.
Ejemplos de uso general
La copia del código es la siguiente:
$ Laboratorio
.script ("script1.js") // script1, script2 y script3 no dependen mutuamente y se pueden ejecutar en cualquier orden
.script ("script2.js")
.script ("script3.js")
.wait (function () {
alerta ("Los scripts 1-3 están cargados!");
})
.script ("script4.js") // debe esperar script1.js, script2.js, script3.js se ejecutará antes de la ejecución
.wait (function () {script4func ();});
La copia del código es la siguiente:
$ Laboratorio
.script ("script.js")
.script ({src: "script1.js", escriba: "text/javaScript"})
.script (["script1.js", "script2.js", "script3.js"])
.script (function () {
// Suponiendo `_IS_IE` definido por la página de host como verdadero en IE y falso en otros navegadores
if (_is_ie) {
regresar "IE.JS"; // Solo si está en IE, este script se cargará
}
demás {
regresar nulo; // Si no está en IE, esta llamada de script se ignorará efectivamente
}
})
Ver Lab.JS Información de carga en la consola
Si desea depurar o ver cada información de carga JS en la consola, puede usar el método $ lab.setGlobaldefaults. Para más detalles, consulte el ejemplo del código.
La copia del código es la siguiente:
<
<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}) // depuración abierta
$ Laboratorio
// La primera cadena de ejecución
.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 segunda cadena de ejecución
.wait (function () {
//console.log(window.$)
//console.log(window._)
})
// La tercera cadena de ejecución
.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 cuarta cadena de ejecución
.wait (function () {
// console.log (plugin1function)
// console.log (plugin2function)
})
// La quinta cadena de ejecución
.script ('js/aaa.js')
.script ('js/bbb.js')
// La sexta cadena de ejecución
.wait (function () {
// console.log (Module1Function)
// console.log (Module2Function)
})
</script>
En este momento, abra la consola y mire la información, como se muestra en la siguiente figura:
Creo que te sorprenderá la función de depuración de Lab.js cuando veas esto. De hecho, Lab.js es bastante poderoso, y entiendo algunas de sus características simples. Escribirlo primero y compartirlo con él. También es por la conveniencia de ti mismo en el futuro.