TechLead
🏗️
Avanzado
6 min lectura

Patrones de Diseño

Patrones de diseño comunes en desarrollo frontend

Preguntas de Entrevista sobre Patrones de Diseño

Domina patrones de diseño comunes usados en desarrollo JavaScript y React.

1. Patrón Singleton

class Singleton {
  constructor() {
    if (Singleton.instance) {
      return Singleton.instance;
    }
    Singleton.instance = this;
    this.data = [];
  }
}

const instancia1 = new Singleton();
const instancia2 = new Singleton();
console.log(instancia1 === instancia2); // true

2. Patrón Observer

class EventEmitter {
  constructor() {
    this.eventos = {};
  }

  on(evento, callback) {
    if (!this.eventos[evento]) {
      this.eventos[evento] = [];
    }
    this.eventos[evento].push(callback);
  }

  emit(evento, datos) {
    if (this.eventos[evento]) {
      this.eventos[evento].forEach(cb => cb(datos));
    }
  }
}

const emitter = new EventEmitter();
emitter.on('login', usuario => console.log(usuario));
emitter.emit('login', { id: 1, nombre: 'Juan' });

3. Patrón Factory

class UserFactory {
  createUser(tipo) {
    switch (tipo) {
      case 'admin':
        return new Admin();
      case 'usuario':
        return new Usuario();
      default:
        return new Invitado();
    }
  }
}

const factory = new UserFactory();
const admin = factory.createUser('admin');

Mejores Prácticas

  • ✓ Usa patrones para resolver problemas específicos
  • ✓ No sobre-ingenierices soluciones simples
  • ✓ Entiende cuándo aplicar cada patrón
  • ✓ Combina patrones cuando sea apropiado