MVVM memarlıq nümunəsi nədir?

MVVM (Model-View-ViewModel) — bu arxitektura nümunəsidir, kodu üç qarşılıqlı əlaqəli komponentə bölmək üçün qurulur:

• Model: Məlumatları və biznes məntiqini təmsil edir. UI-dən asılı deyil.
• View: ViewModel-dən gələn məlumatları göstərir və istifadəçi hərəkətlərini (məsələn, kliklər) ViewModel-ə göndərir. View passivdir və məlumatların işlənməsi məntiqini ehtiva etmir.
• ViewModel: Model və View arasında vasitəçi kimi fəaliyyət göstərir. Model-dən məlumatları göstərmək üçün uyğun formatda təqdim edir və istifadəçi hərəkətlərini işləyərək Model-i yeniləyir. ViewModel çox vaxt məlumat bağlama (data binding) mexanizmlərindən istifadə edir və məlumatlar dəyişdikdə View-ni avtomatik yeniləyir.

Əsas prinsiplər:

• İki tərəfli məlumat bağlama: ViewModel-dəki dəyişikliklər avtomatik olaraq View-də əks olunur və əksinə (uyğun alətlərdən istifadə etməklə).
• Test ediləbilərlik: ViewModel UI ilə əlaqəli olmadığı üçün asanlıqla müstəqil test edilə bilər.
• Məsuliyyətlərin bölünməsi: Görünüş, məlumat və biznes məntiqinin aydın bölünməsi inkişaf və dəstək işlərini sadələşdirir.

Əksər hallarda Vue.js, React (bir neçə varyasiya ilə), Angular kimi deklarativ UI olan tətbiqlərdə istifadə olunur.

Sadə struktur nümunəsi:

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

// ViewModel
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})`; // View üçün displayName yenilənir
  }
}

// View (təxminən, deklarativ framework-də necə görünə bilər)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Yaşı artır</button>
  </div>
</template>

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

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