MVVM архитектурасы деген эмне?

MVVM (Модель-Көрүнүш-МодельКөрүнүш) — бул архитектуралык үлгү, ал кодду бөлүү үчүн түзүлгөн, тиркеменин логикасын үч өз ара байланышкан компонентке бөлөт:

• Модель: Маалыматтарды жана бизнес-логиканы көрсөтөт. UI'га көзкаранды эмес.
• Көрүнүш: Маалыматтарды Моделден көрсөтөт жана колдонуучунун аракеттерин (мисалы, басууларды) Моделге жиберет. Көрүнүш пассивдүү жана маалыматтарды иштетүү логикасын камтыбайт.
• МодельКөрүнүш: Модель жана Көрүнүш ортосундагы ортомчу. Моделден маалыматтарды көрсөтүүгө ыңгайлуу форматта берет жана колдонуучунун аракеттерин иштетип, Моделди жаңыртат. МодельКөрүнүш көбүнчө маалымат байлоо механизмдерин колдонуп, маалыматтар өзгөргөндө Көрүнүштү автоматтык түрдө жаңыртат.

Негизги принциптер:

• Эки тараптуу маалымат байлоо: МодельКөрүнүштөгү өзгөртүүлөр автоматтык түрдө Көрүнүшкө чагылат жана тескерисинче (каржылык инструменттер колдонулганда).
• Тестирлөө оңойлугу: МодельКөрүнүш өзүнчө тестирлөө оңой, анткени ал UI менен байланышта эмес.
• Жоопкерчиликти бөлүү: Көрсөтүүнүн, маалыматтын жана бизнес-логиканын так бөлүнүшү иштеп чыгуу жана тейлөө процесстерин жеңилдетет.

Көп учурда Vue.js, React (кей бир варианттар менен), Angular сыяктуу декларативдүү UI колдонулган тиркемелерде колдонулат.

Жөнөкөй структуранын мисалы:

// Модель
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>
*/