Webforms de ASP.NET, JavaScript en los controles de usuario

Question

Estamos teniendo problemas con la correcta implementación de JavaScript en nuestra solución (APS.NET Webforms).

Queremos tener todo (o al menos tanto como sea posible) de nuestro javascript en la parte inferior de las páginas, de acuerdo con las mejores prácticas, para que las páginas carguen HTML y CSS primero y brinden una mejor experiencia de usuario.

Hay un montón de código jQuery en todo nuestro proyecto que a menudo es específico de ciertos controles, por lo que no queremos que se cargue en todas las páginas.

Actualmente jQuery, incluida jQuery UI, se encuentra en la parte superior de las páginas, por lo que podemos tener usos jQuery en los controles (ya sea de archivos js o código en línea), pero queremos mover todo eso a la parte inferior de la página. Ya hemos agregado un placeplaceplace ("JavascriptFooter") en la parte inferior de la página, por lo que podemos colocar javascript desde las páginas en el pie de página, pero estamos atrapados en los controles.

¿Cuáles son las mejores prácticas para esto? ¿Deberíamos externalizar todos los JS y en el JS comprobar si se carga un control? Pero luego mostraremos demasiadas cosas todo el tiempo. ¿O hay otra manera?

Answer 1

Primero, sugiero cargar Jquery desde un CDN. Aquí está el código de Google:

<script type="text/javascript"> 
    document.write(["\<script type='text/javascript' src='", 
    ("https:" == document.location.protocol) ? "https://" : "http://", 
    "ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'>\<\/script>"].join('')); 
</script> 

esta manera, si el visitante ha servido esto en otro sitio, ya se habrá almacenado en caché. Además, se descargará en paralelo, ya que se entrega desde un host diferente.

También estoy de acuerdo con @ctorx - debe usar la ejecución de documentos listos.

Además, puede usar un control de acceso específico JS en el código detrás de cada control (probablemente una buena idea de todos modos si ese control es el único objeto que utiliza ese JS) - todo este código se representa en el final de la página.

Ejemplo:

Page pg = (Page)System.Web.HttpContext.Current.Handler; // or this.Page in .ascx 
ScriptManager.RegisterStartupScript(pg, typeof(Page), "myJS", "[... your code ]", true); 

Answer 2

Apuesto a que hay tantas soluciones para esto como empresas que usan formularios web. Dicho esto, siempre puede usar el contexto de solicitud para almacenar las secuencias de comandos necesarias y luego escribirlas antes de que se visualice la página.

También podría usar requireJS. No soy un experto, pero hay muchas opciones y maneja tiempos de espera de carga de scripts, dependencias circulares, definición de múltiples dependencias, etc.

Answer 3

En primer lugar, el mejor enfoque es para exteriorizar el JavaScript de controles en un archivo JS que se carga en la primera solicitud a su sitio y todas las peticiones posteriores (es decir site.js). El navegador guardará en caché este archivo y los usuarios no tendrán que descargar el JS una y otra vez como lo harían si el JS permanece en los controles.

A continuación, debe crear un mecanismo para ejecutar solo las partes de la secuencia de comandos que son relevantes para la página de ejecución o el control.

Hay varias maneras de lograrlo, sin embargo, si estuviera en su situación, lo haría de esta manera.

Identifique un elemento de nivel de página que envuelva la mayor parte de su contenido ... generalmente la gente llama a esto wrapper. Agregue dinámicamente un atributo personalizado al contenedor llamado "data-js".Establezca el valor de "data-js" dinámicamente (en el lado del servidor) desde una página o un usuario/control personalizado. Permita que tenga varias claves delimitadas por un conducto (|) u otro carácter.

<div class="wrapper" data-js="funtion1|function2"> 
    <!-- Page content goes here --> 
</div> 

apalancamiento jQuery para buscar este atributo en DOM listo, y ejecutar funciones preferido JS basado en el valor de atributo de datos-js. Esa función contendrá solo el código que sea relevante para la página o controles actuales.

$(function(){ 
    var funcKeys = $('.wrapper').attr('data-js'); 
    if(funcKeys != null) 
    { 
     var funcs = funcKeys.split('|'); 
     for(var i=0; i< funcs.length; i++) { 
      var funcName = eval(funcs[i]); 
      if(typeof funcName == 'function') { 
       funcName(); 
      } 
     } 
    }  
}); 

Usando este enfoque sólo se necesita la referencia jQuery CDN, una referencia al archivo JS de su sitio y el fragmento de código anterior en su diseño.

Luego hay que incluir simplemente las funciones específicas de la página/de control en el archivo de JS sitio específico, así:

function function1() { 
    alert("This is function 1"); 
} 

function function2() { 
    alert("This is function 2"); 
} 

espero que esto ayude.

FYI, también configurar un violín para jugar con su funcionamiento: http://jsfiddle.net/hh84f/1/