Componentes del patrón MVC y ejemplos en pseudocódigo

El patrón MVC (Modelo-Vista-Controlador) divide la aplicación en tres capas interconectadas pero independientes. La capa superior, la vista, se encarga de la interfaz de usuario. La capa inferior, el modelo, gestiona los datos. La capa intermedia, el controaldor, coordina las interacciones entre el modelo y la vista.

Las capas se comunican mediante interfaces, lo que facilita el mantenimiento y la modularidad.

// Definición del Modelo
const modelo = {
  informacion: {
    marcaTemporal: new Date()
  },
  actualizarDatos: function(nuevaFecha) {
    modelo.informacion.marcaTemporal = nuevaFecha;
  }
};

// Definición de la Vista
const vista = {
  contenedor: null,
  plantilla: '<span id="reloj"></span><button id="actualizarBtn">Actualizar</button>',
  inicializar: function(selector) {
    vista.contenedor = document.querySelector(selector);
  },
  renderizar: function(horaFormateada) {
    vista.contenedor.innerHTML = vista.plantilla.replace('<span id="reloj"></span>', '<span id="reloj">' + horaFormateada + '</span>');
  },
  obtenerElemento: function(identificador) {
    return document.querySelector(identificador);
  }
};

// Definición del Controlador
const controlador = {
  inicializar: function(contenedor) {
    vista.inicializar(contenedor);
    vista.renderizar(controlador.formatearHora());
    controlador.vincularEventos();
  },
  eventos: { 'click #actualizarBtn': 'refrescar' },
  formatearHora: function() {
    const horas = modelo.informacion.marcaTemporal.getHours();
    const minutos = modelo.informacion.marcaTemporal.getMinutes();
    const segundos = modelo.informacion.marcaTemporal.getSeconds();
    return `${horas}:${minutos}:${segundos}`;
  },
  refrescar: function() {
    modelo.actualizarDatos(new Date());
    vista.renderizar(controlador.formatearHora());
    controlador.vincularEventos();
  },
  vincularEventos: function() {
    for (const evento in controlador.eventos) {
      const manejador = controlador[controlador.eventos[evento]];
      const espacio = evento.indexOf(' ');
      const tipoEvento = evento.slice(0, espacio);
      const selector = evento.slice(espacio + 1);
      vista.obtenerElemento(selector).addEventListener(tipoEvento, manejador);
    }
  }
};

// Inicializar la aplicación
controlador.inicializar('#app');

API del EventBus y ejemplos

El EventBus es un sistema para gestionar eventos y comunicación entre componentes. Sus métodos principales incluyen:

• $on(nombreEvento, funcion): Registra un manejador para un evento.
• $once(nombreEvento, funcion): Registra un manejador que se ejecuta solo una vez.
• $emit(nombreEvento, datos): Dispara un evento con datos opcionales.
• $remove(nombreEvento, funcion): Elimina un manejador específico.

const busEventos = new EventBus();

const manejadorPrimario = (datos) => {
  console.log('Manejador primario ejecutado');
  console.log(datos);
};

const manejadorSecundario = (datos) => {
  console.log('Manejador secundario ejecutado');
};

// Registrar manejadores
busEventos.$on('accion', manejadorPrimario);
busEventos.$once('accion', manejadorSecundario);

// Disparar evento
busEventos.$emit('accion', { mensaje: 'Hola' });

// Eliminar manejador
busEventos.$remove('accion', manejadorPrimario);

Programación basada en tablas

La programación basada en tablas es un enfoque que utiliza estructuras de datos (como objetos o arreglos) para mapear entradas a salidas, eliminando condicionales complejos. Esto promueve la separación entre lógica y datos.

// Ejemplo con condicionales
function traducirNumero(num) {
  if (num === '1') {
    return 'uno';
  } else if (num === '2') {
    return 'dos';
  } else if (num === '3') {
    return 'tres';
  } else {
    return 'desconocido';
  }
}

// Ejemplo con tabla
function traducirConTabla(num) {
  const tablaTraduccion = {
    '1': 'uno',
    '2': 'dos',
    '3': 'tres'
  };
  return tablaTraduccion[num] || 'desconocido';
}

Para agregar una nueva traduccción, en el enfoque con tabla solo se modifica la estructura de datos, sin alterar la lógica.

Entendimiento de la modularidad

La programación modular implica dividir el código en unidades independietnes según su funcionalidad. Esto facilita la reutilización, el mantenimiento y la escalabilidad, ya que cada módulo puede desarrollarse y probarse de forma aislada.