Cómo organizar el código en una aplicación JavaScript grande
css/
img/
js/
app.js
Controlador. js/
directives.js
filters.js
services.js
lib/
parciales
Parece que tienes montones de ropa apilada por tipos en el suelo, un montón de calcetines, un montón de ropa interior, un montón de camisas, etc. Sabes que el montón de ropa en la esquina contiene los calcetines de lana negros que vas a usar hoy, pero aún te lleva un tiempo encontrarlos.
Este tipo de organización es muy confusa. Una vez que tenga 6, 7 o más controladores o servicios en su código, la administración de archivos se vuelve inmanejable: es difícil encontrar lo que está buscando y los cambios en la documentación en el control de fuente se vuelven incomprensibles.
Cajones
Otra forma común de estructura de archivos JavaScript es categorizar archivos por prototipo. Sigamos con la analogía de la organización: ahora compramos un armario con muchos cajones y planeamos poner calcetines en un cajón, ropa interior en otro y camisas cuidadosamente apiladas en un tercero. En un cajón...
Imagínatelo. Nuevamente, dividimos los archivos en los siguientes arquetipos: Modelo (Negocio
Lógica y estado de negocios), Controladores y Servicios (cifrado de punto final HTTP/JSON) y, de acuerdo con la configuración predeterminada de Angular, estos archivos no son ya que la configuración predeterminada de Angular se generaliza a una arquitectura de "servicio". Por lo tanto, nuestro directorio de JavaScript se ve así:
controllers/
LoginController.js
RegistrationController.js
ProductDetailController.js
p>SearchResultsModel.js
UserModel.js
services/
CartService.js
UserService.js
ProductService.js
Genial, ahora es más fácil encontrar archivos a través del árbol de archivos o los accesos directos del IDE, y el conjunto de cambios en el control de código fuente describe claramente la revisión del archivo. Esta es una gran mejora, pero todavía existen limitaciones.
Imagina que estás en la oficina y de repente te das cuenta de que mañana tienes un viaje de negocios y necesitas unos cuantos trajes lavados en seco, así que llamas a casa y le dices a tu pareja que consiga los trajes negros y azules y el Se entregan a la lavandería corbatas de rayas negras con camisas grises y camisas blancas con corbatas amarillas sólidas. Si tu pareja es nueva en el vestuario, ¿cómo eliges una de las tres corbatas amarillas que más te convenga?
Modularidad
Espero que la metáfora de la ropa no te parezca demasiado cliché, aquí tienes un ejemplo:
Tu socio es un desarrollador nuevo, que estaba Se le pidió que corrigiera un error en esta compleja aplicación.
Miró la carpeta y vio controladores, modelos, servicios, etc. Las carpetas estaban perfectamente organizadas, pero aún no estaba seguro de las dependencias entre los objetos.
Por alguna razón, quería poder reutilizar parte del código, lo que requería recopilar archivos relacionados de varias carpetas, lo que a menudo omitía objetos en algunas carpetas.
Lo creas o no, es raro reutilizar una gran cantidad de código en un nuevo proyecto, pero es muy probable que necesites reutilizar un módulo completo, como el sistema de inicio de sesión. Entonces, ¿no sería mejor dividir los archivos por función? La siguiente estructura de archivos es la estructura de la aplicación dividida por función:
cart/
CartModel.js
CartService.js
common /
directives.js
filters.js
producto/
SearchResultsController.js
SearchResultsModel.js
búsqueda/
ProductDetailController.js
ProductModel.js
ProductService.js
usuario/
LoginController.js
RegistrationController.js
UserModel.js
UserService.js
Aunque en el mundo real Espacio Las limitaciones dificultan la organización de la ropa sobre la marcha, pero un procesamiento similar en programación no tiene costo.
Incluso los nuevos desarrolladores ahora pueden comprender la funcionalidad de la aplicación al nombrar las carpetas de nivel superior, los archivos en la misma carpeta tendrán interdependencias, etc., y simplemente explorar la estructura de organización de archivos, puede comprenderla fácilmente. cómo se realizan el inicio de sesión, el registro y otras operaciones. También puedes reutilizar el código en nuevos proyectos copiándolo y pegándolo.
Con AngularJS, podemos organizar aún más el código en módulos:
var userModule = angular.module('userModule', []); factory('userService', []);
userModule.factory('userService', []);
userModule.factory('userService', []); p>
p>
userModule.factory('userService', [])
userModule.factory('userService') Entonces, ¿cómo lidiar con estos códigos comunes?
Si los objetos de un módulo requieren acceso directo a múltiples objetos "genéricos", proporcione múltiples fachadas para esos objetos. Esto ayuda a reducir las dependencias de cada objeto y demasiados objetos relacionados generalmente significan una estructura de código deficiente.
Si un módulo "genérico" se vuelve demasiado grande, deberá dividirlo en submódulos por área funcional. Garantizar que cada módulo de aplicación utilice sólo los módulos "comunes" que necesita, una variación del "Principio de segregación de interfaz" en SOLID.
Agregar entidades en el ámbito raíz ($rootScope). Esto también se puede utilizar para ámbitos donde varios controladores dependen del mismo objeto (como "PermissionsModel").
Utilice eventos al desacoplar dos componentes que no hacen referencia explícita entre sí, lo cual es posible gracias a los métodos $emit, $broadcast y $on del objeto Scope en Angular. Los controladores pueden activar eventos para realizar determinadas acciones y luego recibir notificaciones cuando se completen las acciones.