MVC - YunusEmreCMD/blokTech GitHub Wiki

Model – view – controller beter bekend als MVC is een software-ontwerp-patroon dat wordt gebruikt voor het ontwikkelen van gebruiksinterfaces die de gerelateerde programmalogica opsplitst in drie onderling verbonden elementen. Interne representaties van informatie wordt op deze manier gescheiden van manieren waarop informatie gepresenteerd en geaccepteerd wordt door de gebruiker. Deze manier van werken wordt traditioneel gebruikt voor grafische gebruiksinterfaces (GUI’s) en het ontwerpen van webapplicaties. Programmeertalen als JavaScript , Python , Perl , Object Pascal / Delphi , Ruby , PHP , Java , C # , Swift en Elixir maken gebruik van zo’n MVC-framework.

Model

De model is de centrale onderdeel van het patroon, ze vertegenwoordigen het datamodel. Het datamodel is de laag tussen de programmeertaal en de database. Binnen het model komen dus voornamelijk de functies die iets uit een database halen en er weer inzetten. (Het beheren van de gegevens, logica en regels van de applicatie)

class Model {
  constructor() {
    // The state of the model, an array of todo objects, prepopulated with some data
    this.todos = [
      {id: 1, text: 'Run a marathon', complete: false},
      {id: 2, text: 'Plant a garden', complete: false},
    ]
  }

  addTodo(todoText) {
    const todo = {
      id: this.todos.length > 0 ? this.todos[this.todos.length - 1].id + 1 : 1,
      text: todoText,
      complete: false,
    }

    this.todos.push(todo)
  }

  // Map through all todos, and replace the text of the todo with the specified id
  editTodo(id, updatedText) {
    this.todos = this.todos.map((todo) =>
      todo.id === id ? {id: todo.id, text: updatedText, complete: todo.complete} : todo,
    )
  }
}

View

De view binnen het MVC patroon vertegenwoordigd de presentatie van de applicatie, de User Interface. Hoe data wordt gepresenteerd op het scherm / de website, Hoe verwerkte gegevens mooi en overzichtelijk wordt weergegeven hebben te maken met de view.

class View {
  constructor() {}

  // Create an element with an optional CSS class
  createElement(tag, className) {
    const element = document.createElement(tag)
    if (className) element.classList.add(className)

    return element
  }

  // Retrieve an element from the DOM
  getElement(selector) {
    const element = document.querySelector(selector)

    return element
  }
}

Controller

De controller is de lijm die ervoor zorgt dat MVC samenkomen. De controller bestaat uit zogenaamde actions, die gelden als handlers (uitvoerders) van de aanvraag van de website bezoeker. Aan de hand van de action worden het juiste model en de juiste view opgespoord en gebruikt.

Wanneer iemand naar de webapplicatie gaat, bepaalt het MVC-systeem aan de hand van de request URI van de bezoeker welke module en actie moeten worden aangeroepen. Acties worden beschreven in de controller die vervolgens het juiste model en de juiste view inlaadt.

class Controller {
  constructor(model, view) {
    this.model = model
    this.view = view

    // Display initial todos
    this.onTodoListChanged(this.model.todos)
  }

  onTodoListChanged = (todos) => {
    this.view.displayTodos(todos)
  }
}

In het kort

• Het model is verantwoordelijk voor het beheer van de gegevens van de applicatie. Het ontvangt gebruikersinvoer van de controller.

• De weergave geeft de presentatie van het model in een bepaald formaat weer.

• De controller reageert op de gebruikersinvoer en voert interacties uit op de datamodelobjecten. De controller ontvangt de invoer, valideert deze optioneel en geeft de invoer vervolgens door aan het model.

Voordeel van MVC

De scheiding die ontstaat tussen programmalogica (controller), databasetransacties (model) en presentatielaag (view) geeft de programmeurs van een complexe webapplicatie een soort rode draad bij het onderhoud van het systeem en het oplossen van softwarefouten (bugs). Ingewikkelde webapplicaties kunnen uit wel duizenden regels programmeercode bestaan.

Wanneer de programmeertechniek MVC wordt gebruikt, en programmeurs zijn bekend met het werken volgens Model View Controller, dan geeft dit een grote tijdswinst bij het oplossen van bugs en het toevoegen van functionaliteiten in de webapplicatie.

Bronnen

Wikipedia MVC Jouw Informatie - MVC Sitemasters - MVC Guru99 - MVC Afbeelding Taniarascia - Voorbeeld Code