Привязка данных и MVVM

  • Статья

MVVM — это конструктивный шаблон архитектуры пользовательского интерфейса, предназначенный для отделения кода пользовательского интерфейса от остального кода. С помощью MVVM можно декларативно определить пользовательский интерфейс в XAML и использовать разметку привязки данных, чтобы связать его с другими слоями, содержащими данные и команды. Инфраструктура привязки данных устанавливает слабую связь, которая обеспечивает синхронизацию пользовательского интерфейса и связанных данных, а также направляет входные данные пользователя в соответствующие команды.

Так как обеспечивается слабая связь, использование привязки данных сокращает жесткие зависимости между различными видами кода. Это упрощает изменение отдельных блоков кода (методов, классов, элементов управления и т. д.) без непредвиденного побочного воздействия на другие блоки. Такое отделение является примером разделения проблем — важного принципа, применяемого во многих конструктивных шаблонах.

Преимущества MVVM

Отделение кода имеет много преимуществ, в том числе следующие.

  • Возможность итеративного произвольного стиля программирования. Изолированные изменения менее опасны и более удобны для экспериментирования.
  • Упрощение модульного тестирования. Блоки кода, изолированные друг от друга, можно тестировать отдельно и вне рабочих сред.
  • Поддержка совместной работы команд. Несвязанный код хорошо спроектированных интерфейсов может быть разработан отдельными пользователями или командами и интегрирован позже.
  • Повышение удобства обслуживания. Устранение ошибок в несвязанном коде снижает вероятность возникновения регрессий в другом коде.

В отличие от приложений MVVM, приложение с более традиционной структурой кода программной части обычно использует привязку данных только для отображаемых данных и реагирует на ввод пользователя, непосредственно обрабатывая события, предоставляемые элементами управления. Обработчики событий реализуются в файлах кода программной части (например, MainPage.xaml.cs) и часто тесно связаны с элементами управления, как правило, содержащими код, который напрямую управляет пользовательским интерфейсом. Это затрудняет или делает невозможной замену элемента управления без изменения кода обработки событий. В этой архитектуре файлы кода программной части часто накапливают в себе код, который не связан непосредственно с пользовательским интерфейсом, например код доступа к базе данных. Это приводит к дублированию кода и его изменению для использования с другими страницами.

Уровни приложения

При использовании шаблона MVVM приложение делится на следующие уровни.

  • На уровне модели определяются типы, представляющие бизнес-данные. Сюда входит все, что необходимо для моделирования основного домена приложения, и на этом уровне часто определяется основная логика приложения. Данный уровень полностью независим от уровней представления и модели представления и нередко частично размещается в облаке. При наличии полностью реализованного уровня модели можно создать несколько различных клиентских приложений, если это необходимо, например приложения UWP и веб-приложения, работающие с одними и теми же базовыми данными.
  • На уровне представления с помощью разметки XAML определяется пользовательский интерфейс. Разметка включает в себя выражения привязки данных (например, x:Bind), определяющие связь между определенными компонентами пользовательского интерфейса и различными элементами модели представления и модели. Файлы кода программной части иногда используются на уровне представления для включения дополнительного кода, необходимого для настройки пользовательского интерфейса или работы с ним, а также для извлечения данных из аргументов обработчика событий перед вызовом метода модели представления, выполняющего основную работу.
  • На уровне модели представления предоставляются цели привязки данных для представления. Во многих случаях модель представления непосредственно предоставляет модель или элементы, содержащие конкретные элементы модели. В модели представления также могут быть определены элементы для отслеживания данных, относящихся к пользовательскому интерфейсу, но не к модели. Например, можно отслеживать порядок отображения в списке элементов. Модель представления также используется в качестве точки интеграции с другими службами, например, с кодом доступа к базе данных. Для простых проектов может не потребоваться отдельный уровень модели. В этих случаях может быть достаточно модели представления, которая инкапсулирует все необходимые данные.

Базовые и расширенные шаблоны MVVM

Как и в случае с любым конструктивным шаблоном, существует несколько способов реализации MVVM, и множество разных методов относится к MVVM. По этой причине существует ряд сторонних платформ MVVM, поддерживающих различные платформы на основе XAML, включая UWP. Однако эти платформы обычно включают в себя несколько служб для реализации несвязанной архитектуры, что делает точное определение MVVM несколько неоднозначным.

Хотя сложные платформы MVVM могут быть очень полезными, особенно для проектов корпоративного уровня, обычно внедрение любого конкретного шаблона или метода требует определенных затрат, и преимущества не всегда очевидны, в зависимости от масштаба и размера вашего проекта. К счастью, вы можете использовать только те методы, которые предоставляют очевидные и ощутимые преимущества, и игнорировать прочие, пока они не понадобятся.

В частности, вы можете получить много преимуществ, просто изучив и применив всю мощь привязки данных и разделив логику приложения на уровни, описанные выше. Чтобы сделать это, достаточно возможностей, предоставляемых Windows SDK. Использовать какие бы то ни было внешние платформы не нужно. В частности, расширение разметки {x:Bind} повышает простоту и эффективность привязки данных по сравнению с предыдущими платформами XAML, устраняя необходимость в большом объеме стандартного кода, требовавшегося ранее.

Дополнительные рекомендации по использованию готовых шаблонов MVVM приведены в примере базы данных заказов клиентов на сайте GitHub. Многие из других примеров приложений UWP также используют базовую архитектуру MVVM, а пример приложения для управления трафиком включает в себя версии на основе кода программной части и MVVM с примечаниями, описывающими преобразование в MVVM.

См. также

Темы

Подробно о привязке данных
Расширение разметки {x:Bind}

Примеры

Пример базы данных заказов клиентов
Пример инвентаризации VanArsdel
Пример приложения для управления трафиком