JavaScript autocargador?

Question

¿Existe alguna solución en la que pueda tener archivos dependientes de autocarga de JavaScript/jQuery cuando sea necesario? Por ejemplo, considere este escenario:

1. Tengo una secuencia de comandos del autocargador que detecta cuándo se debe cargar una secuencia de comandos en particular.
2. Se llama a un jQuery dialog() plugin.
3. Se le dice al cargador automático que escuche cuando se llama a este complemento, y carga la interfaz de usuario de jQuery.
4. Si se llaman más cuadros de diálogo en el futuro, no se cargará la secuencia de comandos requerida.

¿Es esto demasiado esfuerzo por tratar simplemente de limitar el ancho de banda? ¿Debo simplemente incluir todos los archivos centrales en un superpaquete y terminarlo?

Gracias por su tiempo.

Answer 1

Sí, debería incluir todos los scripts en un archivo. O al menos la mayoría de ellos agrupados de esta manera: jquery.js, global.js (que es donde frecuentemente - en más de una, dos páginas - deberían usarse los scripts) y page_specyfic.js. Imagine que se llama a dialog() y el usuario tiene que esperar la descarga de .js y los complementos para inicializar. Los ahorros en ancho de banda (si los hubiera) no valdrían la pena para dañar la experiencia de los usuarios.

Answer 2

Hay muchos ejemplos de carga de scripts a pedido disponibles. Por ejemplo, remy sharp tiene un code sample on his blog que puedes usar tal cual o convertirlo en un plugin jQuery. Desafortunadamente, puede no funcionar en todos los navegadores.

También está el jQuery Lazy Plugin Loader que carga plugins de jQuery a pedido en lugar de por adelantado. Para usarlo se necesitaría para establecer la carga diferida para cada pieza de jQuery UI está utilizando como sigue (nombre será el nombre de la función para cada pieza que se use):

$.lazy([{ 
    src: 'jquery-ui-1.8.14.custom.min.js', 
    name: 'dialog' 
}]); 

También puede utilizar las técnicas en this question about loading jQuery itself on demand. Por ejemplo, puede crear dinámicamente una etiqueta de script en el momento necesario para cargar la interfaz de usuario de jQuery.

Por último, ya que está hablando de jQuery UI, considérelo en Google's CDN, que probablemente esté guardado en la memoria caché del navegador del usuario de todos modos.

Answer 3

Sí, también he pensado en implementar algo como esto. No estoy seguro si valdría la pena o no al final, pero hay bastantes bibliotecas para hacer esto para usted como ensure

Answer 4

No me preocuparía demasiado. Los archivos están en caché. Una vez que una página de su sitio cargue la interfaz de usuario de jquery (o cualquier otro archivo de inclusión como CSS), la próxima vez que lo necesite estará en el caché del navegador del usuario, nunca volverá a cargarse por días/semanas

Answer 5

Suena como usted quiero un gestor de scripts

En general, no puede realizar la carga síncrona de scripts en todos los navegadores, por lo que los cargadores de scripts son necesariamente asincrónicos. Lo que está solicitando no es exactamente posible, ya que la secuencia de comandos debe cargarse, llamar a una devolución de llamada y luego continuar. No querrá llamar a un complemento y no saber si se está ejecutando de forma síncrona o no, lo que lo lleva a un mundo de problemas.

recomiendo nos fijamos en DeferJS, un cargador guión de jQuery: https://github.com/BorisMoore/jsdefer

Answer 6

usted podría intentar algo como esto, pero sería un dolor. básicamente está comprobando el tipo de error capturado y el mensaje de diálogo si (la función que está tratando de llamar no existe) carga la función e intenta llamar al método nuevamente. Como dije, sería un dolor hacer esto en todas partes a menos que se pensara en alguna solución elegante.

function loadDialog() { 
    $('#myDialog').dialog({}); 
} 

try { 
    loadDialog() 
} catch(e) { 
    if (e && e.type && e.type=='not_defined' && e.message == 'dialog is not defined') { 
     //load jQuery plugins... 
     loadDialog(); 
    } 
} 

Answer 7

Este es un post de seguimiento de un comentario anterior:

<link rel="stylesheet" href="../system/stylesheets/universal.css" /> 
<link rel="stylesheet" href="../system/stylesheets/jquery-ui.min.css" /> 
<link rel="stylesheet" href="../system/stylesheets/uploadify.css" /> 
<link rel="stylesheet" href="system/stylesheets/style.css" /> 
<script src="../system/javascripts/swfobject.js"></script> 

<script src="../system/javascripts/jquery.min.js"></script> 
<script src="../system/javascripts/jquery-ui.min.js"></script> 
<script src="../system/javascripts/global.jquery.js"></script> 
<script src="../system/javascripts/analog.jquery.js"></script> 
<script src="../system/javascripts/funtip.jquery.js"></script> 
<script src="../system/javascripts/uploadify.jquery.js"></script> 
<script src="system/javascripts/install.jquery.js"></script> 
<link rel="stylesheet" href="system/templates/stylesheets/style.css" /> 
<script> 
$(document).ready(function() { 
    $(':text, :password, textarea').funtip(); 
}); 
</script> 

Answer 8

Puede probar este nuevo plugin jQuery. Funciona como yeapnope.js pero más tiene sentido.

http://plugins.jquery.com/plugin-tags/autoloader

$(document).autoLoader(
    { 
     test: $.ui, 
     loadScript: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery- ui.min.js", 
     complete: function(){ 
     console.log($.ui); 
     } 
    } 
); 

Answer 9

Desde sus comentarios, parte de su deseo parece ser mantener su código organizado. Yo recomendaría RequireJs. Le permite dividir su código en módulos claramente separados con dependencias explícitas. Luego, cuando quiera ir a producción, hay una herramienta de compilación que los fusionará nuevamente en los archivos 2-3 (solicitud/ahorro de ancho de banda) que desea publicar.