¿Cómo gestionas tus archivos Javascript?

Question

Hoy en día, tenemos toneladas de bibliotecas Javascript por página, además de los archivos Javascript que escribimos nosotros mismos. ¿Cómo los manejas a todos? ¿Cómo los minimizas de una manera organizada?

Answer 1

Primero de todos, YUI Compressor.

Mantenerlos organizados depende de usted, pero la mayoría de los grupos que he visto tienen vienen con una convención que tiene sentido para su aplicación.

En general, es óptimo para empaquetar sus archivos de tal forma que tenga un puñado de paquetes que se pueden incluir en cualquier página dada para el almacenamiento en caché óptimo.

También podría considerar dividir su javascript en segmentos que son fáciles de compartir en todo el equipo.

Answer 2

Voy a tener una carpeta para todos los javascript, y una subcarpeta de eso para bibliotecas de terceros/compartidas, y subcarpetas para cada componente del sitio para mantener todo organizado.

Por ejemplo:

/ 
+--/javascript/ 
    +-- lib/ 
    +-- admin/ 
    +-- compnent1/ 
    +-- compnent2/ 

A continuación, ejecute todo a través de un Minifier/Ofuscador durante el proceso de construcción.

Answer 3

Me'v estado utilizando esto últimamente: http://code.google.com/apis/ajaxlibs/

y luego tener una carpeta "jscripts" donde guardo mi código personalizado.

Answer 4

Organización

Todos mis guiones se mantienen en una estructura de directorios que sigo siempre que trabajo en un sitio. La estructura de directorios normalmente es algo como esto:

+--root 
    |--javascript 
     |--lib 
     |--prototype.js 
     |--scriptaculous 
      |--scriptaculous.js 
      |--effects.js 
      |--.. 
     |--myOwnScript.js 
     |--myOwnScript2.js 

Si, por si acaso, que yo estoy trabajando en un equipo utiliza una cantidad excesiva de secuencias de comandos, entonces voy normalmente Crea una alfombrilla de directorio en que organizaremos scripts por relación. Sin embargo, esto no sucede terriblemente a menudo.

compresión

Aunque hay una gran cantidad de diferentes compresores y ofuscadores por ahí, siempre vuelvo a YUI Compressor.

Inclusión

A menos que un sitio está utilizando algún tipo de página maestra, CMS, o algo que dicte lo que se puede incluir en una página fuera de mi control, solo incluí los scripts necesariamente para la página dada solo por el pequeño rendimiento. Si una página no requiere ningún script, no habrá inclusiones de script en esa página.

Answer 5

En mi último proyecto, teníamos tres tipos de archivos JS, todos ellos dentro de una carpeta JS.

1. Código de biblioteca. Un conjunto de funciones utilizadas en la mayoría de las páginas, por lo que se juntaron en uno o varios archivos.
2. Clases. Estos tenían sus propios archivos, organizados en carpetas según fuera necesario, pero no necesariamente.
3. Ad hoc JS. Código que era específico para esa página. Estos se guardan en archivos que tenían el mismo nombre que las páginas JSP que se suponía que ejecutarse.

El mayor esfuerzo fue en tener la mayor parte del código en los dos primeros tipos, que tiene un código personalizado sólo se sabe qué llamar, y cuando.

Answer 6

Este podría ser un enfoque diferente de lo que estás buscando, pero he estado jugando con la idea de plantillas de JavaScript en el motor de nuestro blog. En pocas palabras, asigna una plantilla de Javascript a un identificador de página utilizando la base de datos e incluirá y miniaturizará dinámicamente todos los archivos JavaScript asociados con esa plantilla y creará un archivo en un caché del lado del servidor con el id. De plantilla como nombre de archivo. Cuando se carga una página, llama al archivo de plantilla que primero verifica si el archivo existe en la caché y lo carga si lo hace. Si no existe, lo crea sobre la marcha y lo incluye. También uso el archivo de plantilla para descomprimir el archivo JavaScript conglomerado.

La idea de la plantilla funcionaría bien para JavaScript en todo el sitio (como una biblioteca de JavaScript), pero no cubre el JavaScript específico de la página. Sin embargo, puede seguir utilizando el mismo enfoque para JavaScript específico de la página al incluir un segundo archivo que haga lo mismo que el anterior.

Answer 7

Cal Henderson (de la fama de Flickr) escribió Serving JavaScript Fast hace un tiempo. Cubre la entrega de activos, no la organización, pero podría responder algunas de sus preguntas.

Éstos son los puntos de la bala:

• Sí, usted debe concatenar archivos JavaScript en la producción para reducir al mínimo el número de peticiones HTTP.
• PERO es posible que no desee concatenar en un archivo gigante; Es posible que desee dividirlo en partes lógicas y distribuir el costo de la transferencia en varias páginas.
• la compresión de gzip es buena, pero no debe servir activos gzip a IE < = 6, por lo que es posible que desee minimizar/comprimir su JavaScript.

Voy a añadir unos puntos de mi propia:

• Usted debe llegar a una solución que funciona tanto para el desarrollo y la producción. En modo de desarrollo, debe extraer archivos JavaScript adicionales a pedido; en producción, debe agrupar todo antes de tiempo. Cambiar de un comportamiento a otro debe ser tan fácil como establecer un indicador.
• Rails 2.0 maneja todo esto a través de asset cache; otros marcos de aplicaciones web pueden ofrecer soluciones similares.
• Como sugiere otra respuesta, colocar bibliotecas de terceros en un directorio lib es un buen comienzo. También puede dividir sus propios archivos JS en subdirectorios si tiene sentido. Idealmente, podrá organizarlos de tal manera que los archivos en un subdirectorio determinado puedan concatenarse en un archivo.