🖥 Шаблон декомпозиции Model-View-ViewModel

⏩Отображения работают с моделями через посредников, которые трансформируют абстракции предметной области в абстракции отображения и обратно. ViewModel также выступает хранилищем состояния отображения, не связанного с предметной областью.

// View
<li class="User_card" model="User_card_model">
  <img src={ image } />
  <p>{ message }</p>
</li>

// ViewModel
class User_card_model {
  user = User.current
  get image() {
    return this.user.avatar
  }
  get message() {
    return this.user.nickname
  }
}

// Modelhttps://habrastorage.org/getpro/habr/upload_files/184/ef6/b75/184ef6b7510290ecd0acc360ed78df5b.png
class User {
  avatar: string
  nickname: string
  static current = new User
}

Плюсы:
— Отображение может использовать произвольные вьюмодели.
— Легко добавлять новые отображения, не меняя ни модели, ни вьюмодели.
— Изменение интерфейса модели или отображения требует изменения только лишь вьюмодели.
— Одну и ту же вьюмодель можно шарить между несколькими отображениями.

Минусы:
— Для отображения разных моделей необходимо дублировать код отображения и вьюмодели.
— Трёх слоёв слишком мало на больших масштабах.

📎 Читать подробнее

@javascriptv