რა არის MVVM არქიტექტურული ნიმუში?

MVVM (მოდელი-ხედი-მოდელიხედვა) — ეს არის არქიტექტურული ნიმუში, რომელიც კოდს აწყობს პროგრამის ლოგიკის სამ ურთიერთდაკავშირებულ კომპონენტად დაყოფით:

• მოდელი: წარმოადგენს მონაცემებს და ბიზნეს ლოგიკას. არ არის დამოკიდებული UI-ზე.
• ხედი: აჩვენებს მონაცემებს მოდელიდან და აგზავნის მომხმარებლის მოქმედებებს (მაგალითად, კლიკებს) მოდელს. ხედი პასიურია და არ შეიცავს მონაცემების დამუშავების ლოგიკას.
• მოდელიხედვა: შუამავალია მოდელთან და ხედთან. უზრუნველყოფს მონაცემებს მოდელიდან გამოსახულებისთვის სასურველ ფორმატში და დამუშავებს მომხმარებლის მოქმედებებს, განაახლებს მოდელს. მოდელიხედვა ხშირად იყენებს მონაცემთა ბმვის მექანიზმებს (data binding) რათა ავტომატურად განაახლოს ხედი მონაცემების ცვლილებისას.

ძირითადი პრინციპები:

• ორმხრივი მონაცემთა ბმული: მოდელიხედვის ცვლილებები ავტომატურად აისახება ხედში და პირიქით (მომსახურების შესაბამისი ინსტრუმენტების გამოყენებით).
• ტესტირების მარტივობა: მოდელიხედვა მარტივია ტესტირებისთვის იზოლირებულად, რადგან ის არ არის დაკავშირებული UI-სთან.
• პასუხისმგებლობის განყოფილება: ვიზუალიზაციის, მონაცემებისა და ბიზნეს ლოგიკის მკაფიო განყოფილება ამარტივებს განვითარების და მხარდაჭერის პროცესს.

ხშირად გამოიყენება დექლარატიული UI-იანი პროგრამებში, როგორიცაა Vue.js, React (რამდენიმე ვარიანტით), Angular.

საუკეთესო მაგალითი მარტივი სტრუქტურის:

// მოდელი
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// მოდელიხედვა
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})`; // განახლება displayName-ისთვის
  }
}

// ხედი (დაკლარატიული ფრეიმვორკის მაგალითზე)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">ასაკის გაზრდა</button>
  </div>
</template>

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

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