¿Cómo organizas tu código Javascript?

Question

Cuando comencé con Javascript, solía poner todo lo que necesitaba en las funciones y las llamaba cuando las necesitaba. Eso fue entonces.

Ahora, como estoy construyendo aplicaciones web cada vez más complejas con Javascript; Aprovechando su interacción con el usuario más receptiva, me estoy dando cuenta de que necesito hacer que mi código sea más legible, no solo por mí, sino por cualquier persona que me reemplace. Además de eso, me gustaría reducir los momentos de "qué diablos, por qué hice esto" cuando leí mi propio código meses después (sí, estoy siendo honesto aquí, tengo qué diablos estaba pensando momentos yo mismo, aunque trato de evitar tales casos)

Hace un par de semanas, entré en Joose, y hasta ahora, ha sido bueno, pero me pregunto qué hacen los demás para hacer que sus fragmentos tengan un significado significativo. segmentos y legibles por el próximo programador.

Además de hacerlo legible, ¿cuáles son sus pasos para hacer que su HTML esté separado de la lógica de su código? Supongamos que necesita crear filas de tablas dinámicas con datos. ¿Incluyes eso en tu código Javascript, agregando el elemento td a la cadena o haces cualquier otra cosa? Estoy buscando soluciones e ideas del mundo real, no algunas ideas teóricas planteadas por algún experto.

Por lo tanto, en caso de que no entendiera lo anterior, ¿utiliza prácticas de OOP? Si no lo usas, ¿qué usas?

Answer 1

Para realmente aplicaciones JS-heavy, debe intentar imitar a Java.

• tengan el menor JS en el código HTML como sea posible (preferiblemente - sólo la llamada a la función de arranque)
• romper el código en unidades lógicas, mantener a todos en archivos separados
• Utilice un guión para concatenar/minify los archivos en un solo paquete, que va a servir como parte de su aplicación
• espacios de nombres uso JS para evitar abarrotar el espacio de nombres global:

 

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

El uso de todas estas técnicas juntas dará como resultado un proyecto muy manejable, incluso si no está utilizando ningún marco.

Answer 2

Uso javascript discreto, por lo tanto, fuera de las etiquetas de script no guardo ningún javascript en el html.

Los dos están completamente separados.

Una función javascript se iniciará cuando se complete el árbol DOM, que irá a través del html y agregará los eventos javascript, y cualquier otra cosa que necesite cambiarse.

Para organizar, tiendo a tener algunos archivos javascript que tienen nombres similares a las páginas html que ellos usan, y luego para funciones comunes, tiendo a agruparlos por lo que hacen, y elijo un nombre que explique eso .

Así, por ejemplo, si tengo funciones de interfaz de usuario entonces puede llamarlos: myapp_ui_functions.js

Trato de poner el nombre de la aplicación en el nombre del archivo, a menos que haya algo de JavaScript que es común a varias proyectos, como strings.js.

Answer 3

He estado reescribiendo gran parte de mi código reutilizable como complementos jQuery. Me mudé a jQuery de Prototype cuando comencé a hacer ASP.NET MVC. En horas extras He migrado mucho mi código reutilizable, o al menos las ideas, desde OO basado en Prototype hasta complementos de jQuery. La mayoría de estos se almacenan en sus propios archivos JS (principalmente aplicaciones de intranet, por lo que la velocidad de carga de la página es bastante alta a pesar de las solicitudes adicionales). Supongo que podría agregar un paso de compilación que combine estos si fuera necesario.

También he establecido un enfoque de MasterPage que utiliza un ContentPlaceHolder para los scripts justo antes de la etiqueta de cierre del cuerpo. Se carga la UI jQuery/jQuery estándar, y cualquier otra JS común va directamente antes del marcador de posición del script en la página maestra. Tengo un poco de JS en la parte superior de la página maestra que define una matriz que contiene las funciones que las vistas parciales deben ejecutar en la carga de la página. Estas funciones se ejecutan desde la función base document.ready() en la página maestra.

Todos mis JS están completamente separados de mi marca.Algunos JS pueden existir en vistas parciales, que se encapsulan cuando el parcial se puede incluir más de una vez para hacerlo específico a esa instancia de la vista, pero generalmente no. Por lo general, solo se incluye en los marcadores de posición para que se cargue en la parte inferior de la página.

Answer 4

Además, si quieres ir pesada OO, echa un vistazo a MochiKit: http://www.mochikit.com/

Answer 5

tengo (por lo general) de un archivo que contiene un montón de funciones y eso es todo. Eso está incluido en cada página que usa Javascript. En las mismas páginas, voy a hacer las llamadas a las funciones como:

$(function() { 
    $("#delete").click(delete_user); 
    $("#new").click(new_user); 
}); 

donde delete_user() y new_user() se definen en el archivo externo.

Yo también uso JavaScript discreto, que para mí significa jQuery (hay otras librerías que son discretas).

No desea un archivo separado para cada página. Eso solo significa más solicitudes HTTP externas innecesarias. Con un archivo — suponiendo que lo ha guardado de manera efectiva —, se descargará una vez y eso es todo (hasta que cambie).

Si tengo una gran cantidad de Javascript o si el sitio está efectivamente dividido en varias áreas, entonces puedo dividir el Javascript, pero ese no es siempre el caso.

Además, en términos de mi código fuente, puedo tener varios archivos JS pero a menudo los combinaré en una descarga para el cliente (para reducir las solicitudes HTTP).

Más en Multiple javascript/css files: best practices? y Supercharging Javascript in PHP.

Answer 6

Creo que el desarrollo de su javascript mediante la metodología OO es el camino a seguir si quiere que sea limpio, legible e incluso algo seguro. He publicado la siguiente pregunta

Cleanest format for writing javascript objects

Y tengo algunas respuestas fantásticas sobre cómo escribir bien mi código Javascript. Si sigue estos principios básicos, puede usar casi cualquier biblioteca, como yui, jquery y prototipo, con facilidad.