🏗️
Avanzado
6 min lecturaPatrones 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