O que é o padrão arquitetónico MVC?

MVC (Model-View-Controller) é um padrão arquitetónico que divide a aplicação em três partes interrelacionadas para melhorar a organização do código e facilitar o desenvolvimento e manutenção:

• Model (Modelo): Representa os dados e a lógica de negócio. É responsável por obter, armazenar e processar dados, bem como pelas regras que os governam. Não tem uma vista direta da interface de utilizador.
• View (Vista): É responsável por mostrar os dados ao utilizador. Obtém dados do Modelo e visualiza-os. Não contém lógica de negócio e não interage diretamente com os dados, exceto para a sua renderização.
• Controller (Controlador): Atua como intermediário entre o Modelo e a Vista. Gerencia a interação com o utilizador (por exemplo, cliques, entrada de dados), obtém dados do Modelo, os passa para a Vista para visualização e atualiza o Modelo quando os dados mudam por ação do utilizador.

Relações principais:

• O utilizador interage com a Vista.
• A Vista passa as ações do utilizador ao Controlador.
• O Controlador processa as ações do utilizador, interagindo com o Modelo (solicita ou atualiza dados).
• O Modelo notifica o Controlador (ou diretamente a Vista, em algumas variações do padrão) sobre alterações nos dados.
• O Controlador atualiza a Vista com base nas alterações no Modelo (ou a Vista atualiza-se automaticamente ao interagir diretamente com o Modelo).

Vantagens:

• Separação de responsabilidades: Facilita o desenvolvimento, teste e manutenção de componentes individuais.
• Reutilização de código: O Modelo e o Controlador podem ser utilizados com diferentes Vistas.
• Facilita os testes: Os componentes podem ser testados de forma independente.
• Desenvolvimento paralelo: Diferentes equipas podem trabalhar em diferentes partes (Modelo, Vista, Controlador) simultaneamente.

Desvantagens:

• Aumento de complexidade: Pode ser excessivo para aplicações pequenas.
• Problema do "Controlador Gordo": O controlador pode tornar-se demasiado grande e complexo se não seguir os princípios de separação.
• Dificuldade em definir limites: Às vezes, é difícil determinar claramente onde termina um componente e começa outro.

Exemplo (esquemático):

// Modelo (por exemplo, uma classe para trabalhar com dados)
class UserModel {
  constructor() {
    this.users = [{
      id: 1,
      name: 'Alice'
    }, {
      id: 2,
      name: 'Bob'
    }];
  }

  getUsers() {
    return this.users;
  }

  addUser(user) {
    this.users.push(user);
    // Notificar sobre a alteração (em uma aplicação real - através de eventos)
  }
}

// View (por exemplo, função para renderizar a lista)
function renderUserList(users) {
  const list = document.getElementById('user-list');
  list.innerHTML = users.map(user => `<li>${user.name}</li>`).join('');
}

// Controlador (para lidar com eventos e coordenar)
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;

    // Inicializar a vista
    this.updateView();

    // Lidar com eventos (por exemplo, clique num botão)
    document.getElementById('add-user-button').addEventListener('click', () => {
      const newUser = {
        id: this.model.getUsers().length + 1,
        name: prompt('Enter user name:')
      };
      if (newUser.name) {
        this.model.addUser(newUser);
        this.updateView(); // Atualizar a vista após alteração do modelo
      }
    });
  }

  updateView() {
    const users = this.model.getUsers();
    this.view(users);
  }
}

// Uso
const model = new UserModel();
const controller = new UserController(model, renderUserList);

Este é um exemplo simplificado que demonstra o princípio básico. Em frameworks reais (como Angular, React, Vue), são utilizadas variações mais avançadas deste e de outros padrões arquiteturais.