Mis on MVVM arhitektuurimuster?

MVVM (Mudeli-Vaade-MudeliVaade) — see arhitektuurimuster, mis struktureerib koodi, jagades rakenduse loogika kolme omavahel seotud komponenti:

• Mudeli: Esindab andmeid ja äriloogikat. Ei sõltu kasutajaliidesest.
• Vaade: Kuvab andmeid mudelist ja saadab kasutaja tegevused (näiteks klõpsud) mudelile. Vaade on passiivne ega sisalda andmetöötlusloogikat.
• MudeliVaade: on vahend mudeli ja vaate vahel. Pakub andmeid mudelist sobivas formaadis ning töötleb kasutaja tegevusi, uuendades mudelit. Sageli kasutab andmebinding-mehhanisme, et automaatselt uuendada vaadet andmete muutmisel.

Põhiprintsiibid:

• Kahepoolne andmebinding: MudeliVaate muudatused kajastuvad automaatselt vaates ja vastupidi (sobivate tööriistade kasutamisel).
• Testitavus: MudeliVaadet on lihtne isoleeritult testida, kuna see ei ole seotud kasutajaliidesega.
• Vastutuse jaotus: Selge vastutuse jaotus vaate, andmete ja äriloogika vahel lihtsustab arendust ja hooldust.

Kasutatakse sageli deklaratiivse kasutajaliidese rakendustes, nagu Vue.js, React (mõningate variatsioonidega), Angular.

Näide lihtsast struktuurist:

// Mudel
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// MudeliVaade
class UserViewModel {
  constructor(user) {
    this.user = user;
    this.displayName = `${user.name} (${user.age})`;
  }

  incrementAge() {
    this.user.age++;
    this.displayName = `${this.user.name} (${this.user.age})`; // uuendame displayName
  }
}

// Vaade (ligilähedaselt, kuidas see võiks välja näha deklaratiivses raamistikus)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Vanust suurenda</button>
  </div>
</template>

<script>
import { User } from './model';
import { UserViewModel } from './viewModel';

export default {
  data() {
    return {
      userViewModel: new UserViewModel(new User('Jaan', 30))
    };
  }
}
</script>
*/