js presenciales vs. js funcionales: ¿separarlos? Arquitectura general?

Question

Este es un tipo general de pregunta.

Muy a menudo, necesito escribir JavaScript para las páginas web. Teniendo en cuenta las mejores prácticas, js discretos, etc. Tengo mi JavaScript en archivos * .js separados. Cada página obtiene su propio archivo js. Lo que me ha molestado un poco últimamente es la combinación de código de presentación con código funcional con el que siempre termino. Entonces, por ejemplo, asignaría un controlador .click a un elemento. En ese clic, el elemento debe cambiar su apariencia y se debe realizar una llamada AJAX al servidor. Entonces, en este momento, haría ambas cosas dentro del manejador .click. Puede ser voluminoso dependiendo de lo que se necesite lograr. Cuando vuelvo a estos bloques de código después de no tocarlos durante una semana, a menudo siento que me toma mucho tiempo rastrear todas las líneas de código cuando solo necesito arreglar algo con apariencia.

De todos modos, cualquier idea sobre la arquitectura/diseño para js presentación vs. js funcionales? Mantenlos en un solo archivo, pero divídelos en funciones separadas. Rómpalos en 2 archivos separados? ¿Déjalos en paz?

Gracias!

Answer 1

Tiendo a mantenerlos todos juntos que están relacionados con el evento que los inició, pero a veces ponen una función en llamar para hacer un grupo específico de cosas. Ejemplo:

function domyUIstuff(myevent, myselector) 
{ 
// stuff here 
}; 
function domyBehaviorStuff(myevent, myselector) 
{ 
//dostuffhere 
}; 
$(selector).click(function(e) 
{ 
    domyUIstuff(e,$(this)); 
    domyBehaviorStuff(e,$(this)); 
}; 

Nota al margen: yo mantener las cosas separadas (hago un montón de cosas asp.net) de diferentes controles de usuario - se crea un archivo myusercontrol.js para mi myusercontrol.ascx, así como una archivo mypage.js para mi mypage.aspx que tiende a reducir el "ruido" cuando depuro - pongo mis funciones "genéricas" en el archivo de página que podría llamar desde mis controles, como los manejadores genéricos de mensajes ajax o genéricos " funciones de utilidad.

Answer 2

Encuentro útil tener tres archivos JS en cada página generada dinámicamente. Las funciones generales que se reutilizan en todas partes, las funciones específicas del proyecto que se usan en todo el proyecto y el archivo js específico de la página. De esta manera usted tiene una idea de lo que es "reutilizable" y lo que no. Esto también lo alienta a "promocionar" su código. Mientras lo "promueve", se encontrará separando cada vez más en UI o Comportamiento. A medida que se separan más cosas, puede encontrar 6 archivos o simplemente dividir cada archivo con una estructura de paquete como sugirió anteriormente UIFunctions(). DoStuff() ... Sin embargo, si tiene que prefijar sus cosas con PageName no tiene promovió su código y tal vez es hora de hacerlo :-)

Así es como lo he estado haciendo. Espero eso ayude.