Model-View-Controller (MVC) — input, opdatering, gengivelse

Model-View-Controller (MVC) — input, opdatering, gengivelse

The interactive FlowJam canvas for this explanation — every lane, row and arrow above is a real QueryChart diagram you can open and edit.

How to read this visual

• Følg sløjfen i den rækkefølge, pilene tegner den: bruger til controller til model til view og tilbage til brugeren.
• De tre kolonner er de tre akter: input ankommer, tilstanden opdateres, outputtet gengives.
• Banerne er adskillelsen af ansvar — hver bane ejer én slags arbejde, og ingen bane laver en andens.

Input

»Brugeren interagerer med grænsefladen« starter sløjfen, og »Controlleren modtager inputtet« er trafikbetjenten: den læser handlingen, afgør, hvad den betyder, og instruerer modellen. Controllerens kommentar gør reglen eksplicit — den holder selv ingen tilstand, og derfor kan den håndtere mange forespørgsler uden at huske noget.

Opdatering

»Controlleren opdaterer modellen« krydser ind i modellens bane, og »Modellen holder tilstanden og forretningsreglerne« er modellens definition: den er den eneste kilde til sandhed for data og de regler, der styrer dem. »Modellen underretter observatører om ændringen« er underretningshalvdelen — modellen fortæller ikke viewet, hvad det skal tegne, den melder kun, at noget er ændret, og et vilkårligt antal views kan lytte med.

Gengivelse

»Viewet gengiver på ny ud fra modellen« er viewets eneste opgave: læs modellen, og vis den. Kommentaren noterer den disciplin, der holder MVC fra at bryde sammen — viewet ændrer aldrig data, det spørger kun og viser. »Brugeren ser den opdaterede grænseflade« lukker cirklen tilbage i brugerens række, hvor hver interaktion både begynder og ender.

Key relationships and takeaways

• Controlleren håndterer input; modellen ejer tilstanden; viewet gengiver — tre ansvar, tre baner.
• Hverken viewet eller controlleren skriver data; alle ændringer går gennem modellen.
• Modellen underretter observatører frem for at kommandere viewet, så én model kan drive mange views.
• Adskillelsen gør hver del testbar for sig — mønsterets oprindelige gevinst.
• MVC er stamfader til mange moderne mønstre (MVVM, MVP, stores i Redux-stil), der alle bevarer den samme adskillelse.

When to use this visual

• At introducere mønsteret for en udvikler, før de læser et frameworks dokumentation — trekanten er det kort, hvert framework implementerer.
• At forklare, hvorfor en kodebase er svær at ændre: tilstand håndteret i viewet er et brud på MVC, og det er synligt på lærredet.
• At sammenligne MVC med de lagdelte arkitekturer i diagrammet om clean architecture.

Sådan fungerer det

1. Læg jeres framework ned over trekanten

   Omdøb de tre bokse med jeres faktiske frameworks dele — en routes-fil som controller, jeres ORM-modeller som model, jeres templates som view — så mønsteret bliver konkret.

2. Tilføj routertrinnet

   Indsæt et routingtrin mellem brugeren og controlleren, hvis jeres framework har et, forbundet til den controller, det sender videre til.

3. Vis flere views

   Tilføj en ekstra view-boks, der lytter til den samme model — en liste og et detaljeview — for at vise den observatørrelation, mønsteret hviler på.

4. Tilføj persistenslaget

   Udvid modellen med et databasetrin, og notér, at modellen ejer det, og at controlleren og viewet aldrig rører det direkte.

Ofte stillede spørgsmål

Hvad er MVC?

MVC — Model-View-Controller — er et softwaremønster, der deler en applikation op i tre dele: controlleren håndterer input, modellen ejer data og forretningsregler, og viewet gengiver modellen. Fordelen ved adskillelsen er, at hver del kan udvikles og testes uafhængigt, og at den samme model kan vises af mange views. Det er det mønster, de fleste webframeworks er bygget på.

Hvorfor er modellen midtpunktet i MVC?

Fordi modellen er den eneste kilde til sandhed. Hvis både controlleren og viewet kunne skrive data, ville de drive fra hinanden og slås om tilstanden. At holde alle ændringer i modellen betyder, at der er præcis ét sted, hvor reglerne for data bor, og at viewet altid er en projektion af en konsistent model. Derfor placerer diagrammet begge modelbokse i deres egen bane.

Hvad sker der, hvis jeg lægger logik i viewet?

Så får du et antimønster, der somme tider kaldes det »fede view«: visningskode blandet med forretningsregler, som ikke kan testes uden at blive gengivet, og som driver væk fra modellen. Den samme kritik rammer en controller, der holder forretningslogik i stedet for at uddelegere. Disciplinen i MVC er, at hver bane bliver i sin bane — diagrammets tre adskilte rækker er den regel gjort synlig.

Hvordan hænger MVC sammen med moderne frameworks?

De fleste moderne frameworks bevarer trekanten under nye navne: MVVM tilføjer et view-model-lag, MVP giver viewet en presenter, og biblioteker til tilstandshåndtering som Redux er i bund og grund modellen med en strengere regel for underretning. Lærredets grundsløjfe — input ændrer tilstand, tilstand driver output — er den invariant, hver eneste af dem bevarer.

Redigér dette diagram i QueryChart (FlowJam)

Åbn præcis dette MVC-lærred som dit eget diagram, omdøb boksene til jeres eget framework, og følg jeres egen forespørgsels vej.

Redigér dette diagram i QueryChart (FlowJam)