¿Cómo garantizar que jQuery.html en el orden de ejecución de JavaScript no sea *_jquery?
En el artículo anterior "Cómo garantizar el orden de ejecución del análisis en profundidad de JavaScript-jQuery.html", revelamos cómo mantener el orden JS dinámico de las funciones jQuery.html en varios navegadores. El secreto es el acceso AJAX sincrónico a JavaScript externo.
Repasemos brevemente el código fuente HTML (test2.htm):
El código es el siguiente:
$(function(){
$('#container '). html(' ' alerta(tipo de (jquery . ui)); ');
}); , cárguelo así. El JavaScript externo no se puede depurar en Firebug, porque el análisis del JavaScript externo es el mismo que el del JavaScript en línea después de AJAX (ambos llaman a jQuery.globalEval):
Lo siguiente ingresa al tema de este artículo: Si JS está cargado en otros dominios, ¿puede jQuery.html garantizar que JS se ejecute de manera ordenada en todos los navegadores?
2. Crear un caso de prueba
1) Preparar dos nombres de dominio.
Para realizar pruebas, creé temporalmente dos subdominios en mi página de inicio personal (http://sanshi.me/), que son:
http://test.sanshi/.
http://test1.sanshi.me/
2) Actualice la página de demostración (test2_1.htm).
Pondré test2_1.htm en el primer subdominio y la dirección de acceso es http://test.sanshi.me/jsorder/test2_1.htm. El código fuente es el siguiente:
.El código es el siguiente:
$(function () {
$('#container ').html(' ' alerta(tipo de(jquery . ui) );') ;
});
Como puede ver, el script jQueryUI apunta al segundo nombre de dominio (test1.sanshi.me).
3) Pruebe en diferentes navegadores
test2_1.htm
Utilice la función jQuery.html para cargar dinámicamente JavaScript en otros dominios.
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11
3. Entonces, jQuery.html no es la clave maestra
No sé si todavía recuerdas el test3.htm que mencionamos en el primer artículo. No, este resultado es exactamente el mismo que el del ejemplo, jQuery.html no es la clave maestra. Esto nos hace preguntarnos si la lógica interna de los dos ejemplos es la misma.
¿Pero el segundo artículo no nos dice claramente que jQuery.html utiliza un mecanismo AJAX sincrónico para cargar JS externo? Espera un momento. . .
¿Encontró algún problema en el análisis anterior? ¿Acaso AJAX no viola obviamente la famosa Política del mismo origen al cargar recursos de otros dominios? Entonces jQuery no se puede implementar de esta manera. Veamos qué dice la documentación de jQuery.ajax:
El evalScript que vimos en el segundo artículo no parece obtener los datos a través de AJAX sincrónico:
4. Sumérgete en el Función jQuery.ajax y vea cómo cargar archivos JS en diferentes dominios.
Los comentarios están escritos con claridad. Si se solicita un archivo JavaScript a través de un GET y el archivo se encuentra en un dominio diferente (remoto), se debe manejar agregando una etiqueta Script en el encabezado, en lugar de mediante el proceso AJAX. Entonces, al final de esta rama condicional, regrese directamente desde el cuerpo de la función:
Después del análisis, descubrimos que al cargar JavaScript dinámicamente en diferentes dominios, jQuery.html en realidad usa el método de agregar etiquetas de script al head El enfoque (ya sea JS externo o JS en línea) es exactamente el mismo que la lógica mencionada en test3.htm en nuestro primer artículo, y también verifica nuestra idea:
Se puede ver que. Para ser compatible Cuando CDN acelera recursos estáticos, también debe utilizar la "Opción 1, cómo garantizar el orden de ejecución al agregar dinámicamente etiquetas de script" mencionada en el primer artículo.
5. Postdata
Esta serie de artículos debería terminar aquí. Pero después de probar jQuery1.5.1, descubrí que es diferente del jQuery1.4.4 que usé. Hace mucho que escuché que jQuery 1.5.1 refactorizó la parte AJAX, pero no esperaba que afectara realmente nuestro código.
Consulte el siguiente artículo: Cómo garantizar el orden de ejecución de JavaScript: las sutiles diferencias entre jquery 1. 5. 1 y jQuery 1.4.4. Continuará. .