Kas yra MVVM architektūros modelis?

MVVM (Modelis-Žiūrėjimo-ModelioŽiūrėjimas) — tai architektūros šablonas, kuris struktūruoja kodą skirstydamas programos logiką į tris tarpusavyje susijusius komponentus:

• Modelis: Atstovauja duomenis ir verslo logiką. Nėra priklausomas nuo UI.
• Žiūrėjimas: Rodo duomenis iš Modelio ir siunčia naudotojo veiksmus (pvz., paspaudimus) į Modelį. Žiūrėjimas yra pasyvus ir neturi duomenų apdorojimo logikos.
• ModelioŽiūrėjimas: yra tarpininkas tarp Modelio ir Žiūrėjimo. Teikia duomenis iš Modelio formatu, patogiu žiūrėjimui, ir apdoroja naudotojo veiksmus, atnaujindamas Modelį. Dažnai naudoja duomenų ryšio mechanizmus (data binding), kad automatiškai atnaujintų Žiūrėjimą, kai keičiasi duomenys.

Pagrindiniai principai:

• Dvipusis duomenų ryšys: ModelioŽiūrėjimo pakeitimai automatiškai atsispindi Žiūrėjime ir atvirkščiai (naudojant atitinkamus įrankius).
• Testavimas: ModelioŽiūrėjimą lengva testuoti izoliuotai, nes jis nėra susijęs su UI.
• Atsakomybės pasidalijimas: Aiškus vaizdo, duomenų ir verslo logikos atskyrimas palengvina kūrimą ir palaikymą.

Dažnai naudojama deklaratyvaus UI programose, tokiose kaip Vue.js, React (su tam tikromis variacijomis), Angular.

Pavyzdys paprastos struktūros:

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

// ModelioŽiūrėjimas
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})`; // atnaujiname displayName
  }
}

// Žiūrėjimas (panašiai, kaip tai galėtų atrodyti deklaratyviame framework'e)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Padidinti amžių</button>
  </div>
</template>

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

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