Patrones de diseño en JavaScript con ejemplos: de la A a la Z

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Patrones de diseño en JavaScript con ejemplos: de la A a la Z

Los patrones de diseño (design patterns) son soluciones probadas para problemas típicos que surgen durante el desarrollo de software. En JavaScript, especialmente en el entorno Node.js, comprender estos patrones ayuda a escribir código más limpio, modular y escalable. En este artículo, analizaremos las principales categorías de patrones con ejemplos ilustrativos.

1. Patrones creacionales (Creational Patterns)

Estos patrones gestionan el proceso de creación de objetos, haciendo que el sistema sea independiente de la forma en que se instancian.

1.1. Singleton (Singleton)

Garantiza que una clase tenga solo una instancia y proporciona un punto de acceso global a ella. En Node.js, los módulos se almacenan en caché por defecto, lo que simplifica la implementación.

class DatabaseConnection {  constructor() {    if (DatabaseConnection.instance) {      return DatabaseConnection.instance;    }    this.connection = null;    DatabaseConnection.instance = this;  }

  connect() {    if (!this.connection) {      this.connection = { status: 'connected' };      console.log('Nueva conexión a la BD');    }    return this.connection;  }}

const db1 = new DatabaseConnection();const db2 = new DatabaseConnection();console.log(db1 === db2); // true

1.2. Método de fábrica (Factory Method)

Define una interfaz para crear un objeto, pero permite que las subclases alteren el tipo de objeto creado. Es ideal para crear diferentes tipos de registradores (loggers).

class LoggerFactory {  createLogger(type) {    switch (type) {      case 'console':        return new ConsoleLogger();      case 'file':        return new FileLogger();      default:        throw new Error('Tipo de registrador desconocido');    }  }}

class ConsoleLogger {  log(message) { console.log(message); }}

class FileLogger {  log(message) { console.log(`[Archivo]: ${message}`); }}

const factory = new LoggerFactory();const logger = factory.createLogger('console');logger.log('Mensaje de prueba');

2. Patrones estructurales (Structural Patterns)

Describen formas de combinar clases y objetos para crear estructuras más grandes.

2.1. Decorador (Decorator)

Añade dinámicamente nuevas responsabilidades a un objeto. En JavaScript, los decoradores a menudo se implementan mediante funciones de orden superior o prototipos.

class Coffee {  cost() { return 10; }  description() { return 'Café'; }}

function withMilk(coffee) {  coffee.cost = () => coffee.cost() + 5;  coffee.description = () => coffee.description() + ', con leche';  return coffee;}

function withSugar(coffee) {  coffee.cost = () => coffee.cost() + 2;  coffee.description = () => coffee.description() + ', con azúcar';  return coffee;}

let myCoffee = new Coffee();myCoffee = withMilk(myCoffee);myCoffee = withSugar(myCoffee);console.log(`${myCoffee.description()}: ${myCoffee.cost()} rublos.`); // Café, con leche, con azúcar: 17 rublos.

2.2. Adaptador (Adapter)

Convierte la interfaz de una clase en otra interfaz esperada por el cliente. Es especialmente útil al integrar bibliotecas de terceros.

class OldAPI {  getUserData() {    return { name: 'Iván', age: 25, email: 'ivan@example.com' };  }}

class NewAPI {  fetchUser() {    return { fullName: 'Iván Petrov', yearsOld: 26, contact: 'ivan@example.com' };  }}

class UserAdapter {  constructor(api) {    this.api = api;  }

  getUserData() {    const data = this.api.fetchUser();    return {      name: data.fullName,      age: data.yearsOld,      email: data.contact    };  }}

const adapter = new UserAdapter(new NewAPI());console.log(adapter.getUserData()); // { name: 'Iván Petrov', age: 26, email: 'ivan@example.com' }