Patrones de diseño en JavaScript: técnicas avanzadas con ejemplos

Patrones de diseño en JavaScript: nivel avanzado con ejemplos en Node.js

Los patrones de diseño son soluciones arquitectónicas probadas para problemas típicos. Si ya conoces los patrones básicos (Singleton, Factory, Observer), es hora de profundizar en construcciones más complejas. En este artículo, analizaremos cuatro patrones GoF avanzados con ejemplos en JavaScript (Node.js): Composite, Chain of Responsibility, State y Memento. Estos patrones te ayudarán a escribir código flexible, escalable y mantenible.

1. Composite

Propósito: Permite agrupar objetos en una estructura de árbol y trabajar con cada objeto o grupo de manera uniforme.

Ejemplo: Sistema de archivos, donde una carpeta puede contener archivos y otras carpetas. Queremos calcular el tamaño total.

// Componenteclass FileSystemComponent {  getSize() {    throw new Error('El método getSize() debe ser implementado');  }}

// Hojaclass File extends FileSystemComponent {  constructor(name, size) {    super();    this.name = name;    this.size = size;  }

  getSize() {    return this.size;  }}

// Contenedor (nodo)class Folder extends FileSystemComponent {  constructor(name) {    super();    this.name = name;    this.children = [];  }

  add(component) {    this.children.push(component);  }

  getSize() {    return this.children.reduce((total, child) => total + child.getSize(), 0);  }}

// Usoconst root = new Folder('root');const src = new Folder('src');const index = new File('index.js', 500);const utils = new File('utils.js', 300);

src.add(index);src.add(utils);root.add(src);root.add(new File('package.json', 200));

console.log(`Tamaño total: ${root.getSize()} bytes`); // 1000 bytes

Ventajas: Simplifica el trabajo con árboles, oculta la complejidad de la jerarquía al cliente.

2. Chain of Responsibility

Propósito: Permite pasar una solicitud a través de una cadena de manejadores hasta que uno de ellos la procese.

Ejemplo: Procesamiento de solicitudes HTTP en Express.js (middleware).

class Handler {  setNext(handler) {    this.next = handler;    return handler;  }

  handle(request) {    if (this.next) {      return this.next.handle(request);    }    return null;  }}

class AuthHandler extends Handler {  handle(request) {    if (!request.token) {      return 'Error: no autorizado';    }    console.log('AuthHandler: verificación superada');    return super.handle(request);  }}

class RoleHandler extends Handler {  handle(request) {    if (request.role !== 'admin') {      return 'Error: permisos insuficientes';    }    console.log('RoleHandler: rol confirmado');    return super.handle(request);  }}

class LoggingHandler extends Handler {  handle(request) {    console.log(`LoggingHandler: solicitud de ${request.user}`);    return super.handle(request);  }}

// Construcción de la cadenaconst auth = new AuthHandler();const role = new RoleHandler();const log = new LoggingHandler();auth.setNext(role).setNext(log);

const request = { token: 'abc123', role: 'admin', user: 'Ivan' };const result = auth.handle(request);console.log(result); // null (todo bien)

const badRequest = { token: 'abc123', role: 'user', user: 'Petr' };console.log(auth.handle(badRequest)); // 'Error: permisos insuficientes'

Ventajas: Reduce el acoplamiento, facilita agregar/eliminar manejadores.

3. State

Propósito: Permite que un objeto cambie su comportamiento según su estado interno.

Ejemplo: Documento con estados: Borrador, En moderación, Publicado.

class Docu