Soy principalmente un desarrollador PHP, pero últimamente he estado jugando con una gran cantidad de JavaScript, principalmente en jQuery.¿Cómo se organiza el código JavaScript en el proyecto para su mantenimiento?
El problema es que el código es cada vez más difícil de depurar y esto hizo más difícil porque tengo detectores de eventos distribuidos en el HTML.
El código maneja las llamadas AJAX y la manipulación de DOM.
Esto significa que tiene tres tipos de archivos, HTML, CSS y JS.
No mezcla ningún HTML, CSS o JS. Cada uno de ellos está en su propio archivo.
Simplemente guardando todo por separado y nunca usando Javascript en línea o en línea CSS puede resolver la mayoría de los problemas de organización de su código.
Otra técnica es empaquetadores y minificadores.
Mis empaquetadores de elección son browserify (JS) y less (CSS)
empaquetadores significa que usted tiene todo el código en muchos archivos/módulos divididos por el buen diseño. Entonces, debido a que el envío de muchos archivos pequeños es costoso, se usa un creador de tiempo de compilación para convertir todos sus js en un archivo js y todo su CSS en un archivo css.
En cuanto a JS, tiendo a ir más allá y usar un cargador de módulo. Browserify es a la vez un empaquetador y un cargador de módulos.
Los cargadores de módulos le permiten definir los módulos pequeños y cargarlos/requerirlos cuando lo necesite y cuando lo necesite.
También implemento la arquitectura impulsada por eventos y el patrón mediator para mantener mi código muy ligeramente acoplado. Se podría ir más allá e implementar algo como el blackboard system, pero no lo he intentado personalmente.
Sí, esto es lo que sigo, aunque tiendo a incluir html directo en un archivo php si es necesario. –
@ ProjectV1 No puedo hablar por PHP, pero el instinto es que es una mala práctica. – Raynos
Sí, lo es y tal vez no debería empezar a escribir algunas pautas –
Puede considerar el uso de CommonJS "require" para separar el código javascript en muchos archivos, luego use browserify o Webpack. Otra opción es Cor, que es un lenguaje que se compila en JavaScript y se centra en la organización, la limpieza y la experiencia de desarrollo.
1) No coloque controladores de eventos en línea – William
@Lime también tengo problemas con el javascript normal que no funciona antes de $ (documento) .ready() – MrFoh