Técnicas para agrupar código JavaScript

Question

Tengo muchas funciones y controladores de eventos que se dividen en varios archivos javascript que se incluyen en diferentes páginas de mi sitio.

Por razones de rendimiento, quiero combinar todos esos archivos en 1 archivo que es global en todo el sitio.

El problema es que solicitaré que los controladores de eventos invoquen elementos que no necesariamente existirán y los mismos nombres de funciones.

Este es un ejemplo de un archivo típico Javascript ...

$(document).ready(function(){ 
    $('#blah').keypress(function(e){ 
     if (e.which == 13) { 
      checkMap(); 
      return false; 
     } 
    }); 
}); 

function checkMap() { 
    // code 
} 

function loadMap() { 
    // code 
} 

que tendría que separar el código en un objeto que se llama en esa página específica.

Mis pensamientos son que pude volver a escribir así:

(function($) { 
    $.homepage = { 
     checkMap: function(){ 
      // code 
     }, 
     loadMap: function(){ 
      //code 
     } 
    }; 
})(jQuery); 

Y a continuación, en la página que requiere que yo podría llamar $.homepage.checkMap() etc.

Pero entonces ¿cómo iba a declarar como controladores de eventos document.ready sin incluirlo en su propia función?

Cualquier consejo sobre las mejores prácticas sería genial, ¡gracias!

Answer 1

Creo que todo lo que necesita es un espacio de nombres para su aplicación. Un espacio de nombres es un objeto JSON simple que podría tener este aspecto:

var myApp = { 
    homepage : { 
     showHeader : function(){}, 
     hideHeader : function(){}, 
     animationDelay : 3400, 
     start : function(){} // the function that start the entire homepage logic 
    }, 
    about : { 
    .... 
    } 
} 

puede dividirlo en varios archivos:

1. MiApl contendrá el myApp = {objeto}, tal vez con algunas herramientas útiles como object.create o lo que tienes.
2. Homepage.js contendrá myApp.homepage = {...} con todos los métodos de la página de su página de inicio.
3. La lista sigue y sigue con el resto de las páginas.

Piense en ello como paquetes. No necesita usar $ como el objeto principal.

<script src="myapp.js"></script> 
<script src="homepage.js"></script> 
<-....-> 
<script> 
    myApp.homepage.start(); 
</script> 

Sería la forma en que usaría el objeto de la página de inicio.

Al comprimir con YUI, usted debe tener:

<script src="scripts.min.js"></script> 
<script> 
    myApp.homepage.start(); 
</script> 

Answer 2

Solo para asegurarme de que lo he entendido correctamente, tiene un archivo js con todo su código, pero ¿desea tener el control de lo que se ejecuta en una página determinada?

Si ese es el caso, entonces el Terrific JS framework podría interesarle. Le permite aplicar la funcionalidad de javascript a un módulo. Un módulo es un componente en su página web, como la navegación, el encabezado, un convertidor de divisas. Terrific JS escanea el dominio y ejecuta el js para los módulos que encuentra, por lo que no tiene que preocuparse por la ejecución. Terrific JS requiere convenciones de nombres OOCSS para identificar módulos. No es una solución rápida a su problema pero le ayudará si está dispuesto a tomarse el tiempo. Estos son algunos enlaces más que usted puede encontrar útil:

Hola Ejemplo Mundo: http://jsfiddle.net/brunschgi/uzjSM/

Blogpost sobre el uso de: http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Answer 3

En primer lugar: Dependiendo de la cantidad de código que tiene, debe tener en cuenta, si sirve todo su código en un solo archivo, realmente es una buena idea. Está bien guardar las solicitudes http, pero si carga una gran cantidad de código, del cual usa el 5% en una sola página, sería mejor mantener esos archivos js separados (¡especialmente en entornos móviles!). Recuerde, puede dejar que el navegador guarde en caché esos archivos. Según la frecuencia con la que cambie el código y la cantidad de cambios en la fuente, es posible que desee separar el código en funcionalidad básica estable y paquetes .js adicionales para fines especiales. De esta forma, es posible que esté mejor alejado del tráfico y del mantenimiento.

Encapsular sus funciones en diferentes objetos es una buena idea para evitar la elevación innecesaria de funciones y la contaminación del espacio de nombres global.

Por último se puede evitar llamar a los controladores de eventos innecesarias ya sea:

La introducción de algún tipo de tipo de página que le ayuda a decidir llamar solamente las funciones necesarias.

o

la comprobación de la existencia de ciertos elementos como esto if($("specialelement").length > 0){ callhandlers}

para acelerar sus JS, se puede utilizar el compilador Cierre Google. Minifica y optimiza tu código.

Answer 4

Usaría algo así como el compresor YUI para unir todos los archivos en un archivo min.js que se minimiza. Si busca rendimiento, tanto la fusión como la minifusión es el camino a seguir. http://developer.yahoo.com/yui/compressor/

Ejemplo: Javascript archivos de entrada: jquery.js, ads.js support.js

Yui carrera con jquery.js, ads.js, support.js salida en min.js

Archivos de salida Javascript: min.js

luego use min.js en su código html.

Answer 5

Aquí está una presentación sobre la forma en que lo hacen en Yahoo (YUI): http://www.youtube.com/watch?v=HifKkERVtVs

Answer 6

Tome un vistazo a estos chicos web site y relacionados presentation. El sitio web está DISEÑADO para ayudarlo a elegir un marco.