Ի՞նչ է MVVM ճարտարապետական ձևանմուշը։

MVVM (Մոդել-Դիտող-ՄոդելԴիտող) — դա ճարտարապետական օրինակ է, որը կառուցված է կոդը բաժանելու համար՝ ծրագրի տրամաբանությունը երեք փոխկապակցված բաղադրիչների միջև՝

• Մոդել: Ներկայացնում է տվյալները և բիզնես տրամաբանությունը: Չի կախված UI-ից:
• Դիտող: Ցույց է տալիս տվյալները Մոդելից և ուղարկում է օգտվողի գործողությունները (օրինակ՝ սեղմումները) Մոդելին: Դիտողը պասիվ է և չի պարունակում տվյալների մշակման տրամաբանություն:
• ՄոդելԴիտող: Կենտրոնական դեր է խաղում՝ միջնորդ Մոդել և Դիտող միջև: Տվյալները տրամադրում է այն ձևաչափով, որը հարմար է Դիտողին ցուցադրելու, և մշակում է օգտվողի գործողությունները՝ թարմացնելով Մոդելը: ՄոդելԴիտողը հաճախ օգտագործում է տվյալների կապման մեխանիզմներ՝ ավտոմատ կերպով թարմացնելու համար Դիտողը տվյալների փոփոխության դեպքում:

Հիմնարար սկզբունքներ՝

• Երկկողմանի տվյալների կապ: ՄոդելԴիտողի փոփոխությունները ավտոմատ կերպով արտացոլվում են Դիտողում, և հակառակը (համապատասխան գործիքների օգտագործմամբ):
• Թեստավորման հեշտություն: ՄոդելԴիտողը հեշտ է թեստավորել առանձին, քանի որ այն չի կապված 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>
*/