MVVM (Model-View-ViewModel)

MVVM nima?

MVVM (Model-View-ViewModel) — bu MVC ning takomillashtirilgan versiyasi bo’lib, u asosan UI (User Interface) ni biznes logika va ma’lumotlardan ajratishga qaratilgan. Bu pattern Microsoft tomonidan WPF (Windows Presentation Foundation) uchun ishlab chiqilgan, lekin bugungi kunda zamonaviy frontend freymvorklarining (ayniqsa Vue.js va Angular) asosini tashkil etadi.

MVVM uchta asosiy qismdan iborat:

Model: Ma’lumotlar va biznes logika.
View: Foydalanuvchi interfeysi (UI).
ViewModel: View va Model o’rtasidagi vositachi bo’lib, Data Binding orqali ishlaydi.

Asosiy farqi: Data Binding

MVC dan farqli o’laroq, MVVM da View va ViewModel o’rtasida ikki tomonlama bog’lanish (Two-way Data Binding) mavjud. Bu shuni anglatadiki:

Model dagi ma’lumot o’zgarsa, View avtomatik yangilanadi.
View da foydalanuvchi biror narsani o’zgartirsa (inputga yozsa), Model avtomatik yangilanadi.

Komponentlar

1. Model

Xuddi MVC dagi kabi, bu ma’lumotlar va biznes qoidalarni saqlaydi.

2. View

Foydalanuvchiga ko’rinadigan qism. U ViewModel ga bog’langan (bind qilingan) bo’ladi. U faqat ma’lumotni qanday ko’rsatishni biladi, lekin uning qayerdan kelishini bilmaydi.

3. ViewModel

Bu View ning abstraksiyasi. U Model dan ma’lumot oladi va uni View tushunadigan formatga o’tkazadi. ViewModel da View ga tegishli hech qanday to’g’ridan-to’g’ri referens (masalan, DOM elementlari) bo’lmaydi.

Ishlash tartibi

graph LR
    View -- "Data Binding" --> ViewModel
    ViewModel -- "Updates" --> View
    ViewModel -- "Updates" --> Model
    Model -- "Notifications" --> ViewModel

Frontendda MVVM (Vue.js misolida)

Vue.js yoki Knockout.js kabi kutubxonalar MVVM patterniga yaqqol misol bo’la oladi.

// Model
const data = {
  message: "Salom, Dunyo!"
};

// ViewModel (Vue instance)
const vm = new Vue({
  data: data,
  methods: {
    updateMessage() {
      this.message = "Salom, MVVM!";
    }
  }
});

// View (HTML)
// <div>{{ message }}</div>

Bu yerda this.message o’zgarganda, HTML dagi matn avtomatik o’zgaradi. Dom bilan qo’lda ishlash (document.getElementById...) shart emas.