MVVM arxitektura naqshasi nima?

MVVM (Model-View-ViewModel) — bu arxitektura naqshidir, u kodni uchta o‘zaro bog‘liq komponentga bo‘lish uchun tuzilgan:

• Model: Ma’lumotlar va biznes mantiqini ifodalaydi. UI’dan mustaqil.
• View: ViewModel’dan ma’lumotlarni ko‘rsatadi va foydalanuvchi harakatlarini (masalan, bosishlar) ViewModelga yuboradi. View passiv bo‘lib, ma’lumotlarni ishlash mantiqini o‘z ichiga olmaydi.
• ViewModel: Model va View o‘rtasida vositachi bo‘lib xizmat qiladi. Modeldan ma’lumotlarni ko‘rsatishga qulay formatda taqdim etadi va foydalanuvchi harakatlarini ishlov berib, Modelni yangilaydi. ViewModel ko‘pincha ma’lumotlarni bog‘lash (data binding) mexanizmlaridan foydalanadi, shunda ma’lumotlar o‘zgarganda View avtomatik ravishda yangilanadi.

Asosiy tamoyillar:

• Ikki tomonlama ma’lumotlarni bog‘lash: ViewModeldagi o‘zgarishlar avtomatik ravishda Viewda aks etadi va aksincha (mos keladigan vositalar yordamida).
• Test qilish imkoniyati: ViewModel UI bilan bog‘liq bo‘lmaganligi uchun, uni alohida test qilish oson.
• Mas’uliyatlarni ajratish: Ko‘rinish, ma’lumotlar va biznes mantiqining aniq ajralishi rivojlantirish va texnik xizmat ko‘rsatishni soddalashtiradi.

Ko‘pincha Vue.js, React (bir nechta variatsiyalar bilan), Angular kabi deklarativ UI bilan ishlaydigan ilovalarda qo‘llaniladi.

Eng oddiy tuzilma misoli:

// 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 uchun displayName yangilanadi
  }
}

// View (taxminan, qanday ko‘rinishda bo‘lishi mumkin deklarativ frameworkda)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Yoshni oshirish</button>
  </div>
</template>

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

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