Cómo usar patrones de diseño de JavaScript

Los patrones de diseño de JavaScript brindan soluciones comprobadas a problemas comunes en el desarrollo de software. Comprender y aplicar estos patrones le permitirá escribir código JavaScript mejor y más eficiente.

Introducción a los patrones de diseño de JavaScript

Los conceptos contenidos en los patrones de diseño de JavaScript sirven para guiarlo sobre cómo superar los problemas comunes que enfrentará como desarrollador de JavaScript.

Debe comprender las abstracciones subyacentes detrás de los patrones, para poder aplicarlas a su problema particular. También debería poder identificar cuándo cualquiera de dichos patrones puede ser útil para su código.

El patrón del módulo

El patrón Módulo, que proporciona encapsulación, es parte de Sistema de módulos de JavaScript. Proporciona una forma de proteger los datos privados y el comportamiento dentro de un módulo mientras expone una API pública. Le permite crear objetos de módulo autónomos con niveles de acceso público y privado.

Esto es un poco como puedes use modificadores de acceso en una clase en un lenguaje como Java o C++.

En JavaScript, puede implementar el patrón de Módulo usando cierres.

Al usar un cierre para incluir miembros privados (funciones, variables, datos), crea un ámbito en el que se puede acceder a estos miembros pero no se exponen directamente al mundo exterior. Esto ayuda a lograr la encapsulación, manteniendo los detalles internos ocultos del código externo.

Además, devolver una API pública desde el cierre permite el acceso privado a ciertas funciones o propiedades que desea exponer como parte de la interfaz del módulo.

Esto le dará control sobre qué partes del módulo son accesibles para otras partes de la base de código. Eso mantiene un límite claro entre la funcionalidad pública y privada.

Aquí hay un ejemplo:

constante ShoppingCartModule = (función () {
// datos privados
dejar carritoItems = [];
// método privado
funcióncalcularTotalItems() {
devolver cartItems.reduce((total, artículo) => total + artículo.cantidad, 0);
 }
//API pública
devolver {
 addItem (elemento) {
 cartItems.push (artículo);
 },
 obtenerArtículosTotales() {
devolver calcularArtículosTotales();
 },
 vaciar carrito() {
 carritoItems = [];
 }
 };
})();
// ejemplo de uso
ShoppingCartModule.addItem({ nombre: 'Producto 1', cantidad: 2 });
ShoppingCartModule.addItem({ nombre: 'Producto 2', cantidad: 1 });
consola.log (MóduloCarrito.getTotalItems()); // Salida: 3
ShoppingCartModule.clearCart();
consola.log (MóduloCarrito.getTotalItems()); // Salida: 0

En este ejemplo, el Carro De ComprasMódulo representa un módulo creado usando el patrón de módulo. La ejecución del código es así:

1. El IIFE envuelve todo el bloque de código, creando una función que se ejecuta inmediatamente después de la declaración. Esto establece un alcance privado para los miembros del módulo.
2. carritoItems es una matriz privada. No es directamente accesible desde el exterior del módulo.
3. calcularTotalItems() es un método privado que calcula el número total de artículos en el carrito. utiliza el reducir() método para iterar sobre el carritoItems matriz y suma las cantidades de todos los artículos.
4. El módulo devuelve su API pública como un objeto literal, exponiendo tres métodos públicos: añadir artículo(), getTotalItems(), y vaciar carrito().
5. Fuera del módulo, puede acceder a los métodos públicos del módulo para interactuar con la funcionalidad del carrito de compras.

Este ejemplo demuestra cómo el patrón de módulo le permite encapsular datos privados (carritoItems) y comportamiento (calcularTotalItems) dentro del módulo mientras proporciona una interfaz pública (añadir artículo, getTotalItems, y vaciar carrito) para interactuar con el módulo.

El patrón del observador

El patrón Observer establece una dependencia de uno a muchos entre objetos. Cuando cambia el estado de un objeto, notifica a todos sus dependientes y se actualizan automáticamente. Este patrón es particularmente útil para administrar interacciones impulsadas por eventos o desacoplar componentes en un sistema.

En JavaScript, puede implementar el patrón Observer usando el addEventListener incorporado, DispatchEvent métodos o cualquier mecanismos de manejo de eventos. Al suscribir observadores a eventos o temas, puede notificarlos y actualizarlos cuando ocurran eventos específicos.

Por ejemplo, puede usar el patrón Observer para implementar un sistema de notificación simple:

// Implementación del patrón observador
funciónSistema de notificación() {
// Lista de suscriptores
este.suscriptores = [];
// Método para suscribirse a las notificaciones
este.suscribirse = función (abonado) {
este.subscribers.push (suscriptor);
 };
// Método para darse de baja de las notificaciones
este.darse de baja = función (abonado) {
constante índice = este.subscribers.indexOf (suscriptor);
si (índice !== -1) {
este.subscribers.splice (índice, 1);
 }
 };
// Método para notificar a los suscriptores
este.notificar = función (mensaje) {
este.suscriptores.paraCada(función (abonado) {
 suscriptor.receiveNotification (mensaje);
 });
 };
}
// objeto Suscriptor
funciónAbonado(nombre) {
// Método para recibir y manejar notificaciones
este.receiveNotification = función (mensaje) {
consola.log (nombre + ' notificacion recibida: ' + mensaje);
 };
}
// ejemplo de uso
constante sistema de notificaciones = nuevo Sistema de notificaciones();
// Crear suscriptores
constante suscriptor1 = nuevo Abonado('Suscriptor 1');
constante suscriptor2 = nuevo Abonado('Suscriptor 2');
// Suscribir suscriptores al sistema de notificaciones
sistema de notificaciones.subscribe (suscriptor1);
sistema de notificaciones.subscribe (suscriptor2);
// Notificar a los suscriptores
sistema de notificaciones.notify('¡Nueva notificación!');

El objetivo aquí es permitir que múltiples suscriptores reciban notificaciones cuando ocurra un evento específico.

El Sistema de notificación función representa el sistema que envía notificaciones, y el Abonado La función representa a los destinatarios de las notificaciones.

El NotificationSystem tiene una matriz llamada suscriptores para almacenar los suscriptores que quieren recibir notificaciones. El suscribir El método permite que los suscriptores se registren agregándose a la matriz de suscriptores. El darse de baja El método eliminaría suscriptores de la matriz.

El notificar El método en NotificationSystem itera a través de la matriz de suscriptores y llama al recibir notificación método en cada suscriptor, permitiéndoles manejar las notificaciones.

Las instancias de la función Subscriber representan suscriptores. Cada suscriptor tiene un método receiveNotification que determina cómo manejan las notificaciones recibidas. En este ejemplo, el método registra el mensaje recibido en la consola.

Para usar el patrón de observador, cree una instancia de NotificationSystem. Luego puede crear instancias de Suscriptor y agregarlas al sistema de notificación utilizando el método de suscripción.

Enviar una notificación activará el método receiveNotification para cada suscriptor y registrará el mensaje para cada suscriptor.

El patrón Observer permite un acoplamiento flexible entre el sistema de notificación y los suscriptores, lo que permite flexibilidad. El patrón promueve la separación de preocupaciones, lo que facilitará el mantenimiento en los sistemas controlados por eventos.

Uso de patrones de JavaScript avanzados

Aquí hay algunos consejos generales para usar efectivamente patrones de JavaScript avanzados:

• Considere las implicaciones de rendimiento: los patrones avanzados pueden introducir una complejidad adicional, lo que puede afectar el rendimiento. Sea consciente de las implicaciones de rendimiento y optimizar donde sea necesario.
• Evita los antipatrones: Comprende los patrones a fondo y evita caer en antipatrones o hacer un mal uso de ellos. Utilice patrones donde tengan sentido y se alineen con los requisitos de su aplicación.
• Siga las convenciones de codificación: siga de forma constante las convenciones de codificación para mantener la legibilidad y la coherencia en su base de código. Utilice nombres significativos de variables y funciones y proporcione documentación clara para sus patrones.

Tenga cuidado al aplicar estos patrones

El patrón Módulo permite la encapsulación y promueve la privacidad de los datos, la organización del código y la creación de módulos autónomos.

Por otro lado, el patrón Observer facilita la comunicación entre componentes al establecer una relación sujeto-suscriptor.

Debe tener en cuenta los peligros potenciales y los errores comunes al implementar patrones de JavaScript avanzados. Evite el uso excesivo de patrones donde existen soluciones más simples o la creación de código demasiado complejo. Revise y refactorice regularmente su código para asegurarse de que se pueda mantener.