RKDEEP

Angular это MVVP или MVP паттерн?

Kirill Rybkin2019-08-26

Основные MV* паттерны.

Что отличает MVVM паттерн от других MV* паттернов?

Структуры всех MV* паттернов похожи и их можно описать в виде 3-х блоков. Отличия составляют обязанности, возложенные на связь между Model и View.

  • Presenter является связующим звеном между представлением(View) и моделью(Model). Он преобразует данные полученные от Model и отслеживает их изменение для обновления View. Сложность данного паттерна в том, что UI содержит данные, которые не относятся к модели: состояние сетевых запросов, выбранные элементы списка и др.

  • Presentation Model хранит состояние UI, которое считывает View. В паттерне не описано как синхронизировать данные в Presentation Model на View, об этом нужно позаботится разработчику самостоятельно.

  • ViewModel является развитием Presentation Model и синхронизация состояния ViewModel и View осуществляется через databinding.

Angular следует компонентной архитектуре и в классическом виде не соответствует не одному паттерну. Он следует принципам MVVM и RxPM.

Реализация в Angular.

MVVM паттерн делит логику на 3 части View, Presenter, Model.

Model

Модель определяет структуру сущности в вашем приложении. Модель зависит от контента в вашем приложении. Например, в вашем приложении есть пользователь, то реализация модели приняла бы вид:


class User {
  firstname: string;
  lastname: string;
  email: string;
  address: string;
}

Модель это class или interface в TypeScript. Она не должна содержать никакой бизнес логики. Вся логика помещается в ViewModel.

ViewModel

ViewModel

Содержит в себе бизнес логику страницы и управляет моделями и свойствами, которые должны отображаться во View. Связь данных выполняется через databinding. Это означает, что изменения в свойствах ViewModel будут отображаться во View. В Angular реализация ViewModel представлена TypeScript классом.

View

View отвечает за визуальное представление приложения. В Angular View реализован в компоненте как template, с использованием CSS и HTML. Template всегда является частью компонента и связан с ViewModel через databinding.

Angular component

Базовый Angular компонент состоит из 2 частей. Первая часть это декоратор TypeScript @Component({}), в котором определяются основные свойства компонента: selector, template, style.


@Component({
    selector:"calendar",
    templateUrl:"./component.html",
    styleUrls: ["./component.css"]
})

Вторая часть компонента это TypeScript class, в котором описывается вся логика компонента.


export class Calendar{
}

Для отображения нашего компонента во View необходимо добавить в компонент верхнего уровня selector:

<calendar></calendar>