An overview of the MVVM design pattern in Swift
Обзор шаблона проектирования архитектуры приложения MVVM в Swift
В этой статье предполагается, что вы уже знакомы с шаблоном MVC, который является базовым шаблоном дизайна, принятым и рекомендованным Apple.
What is MVVM?
Что такое MVVM?: Model-View-ViewModel (MVVM) — шаблон проектирования архитектуры приложения. Используется для разделения модели и её представления, что необходимо для их изменения отдельно друг от друга. Например, разработчик задаёт логику работы с данными, а дизайнер работает с пользовательским интерфейсом.
Models
Модели: Они содержат данные приложения. Это структуры и классы, созданные для хранения данных, полученных из REST API или из других источников данных.
Views
Представление: Представление определяет визуальный интерфейс, через который пользователь взаимодействует с приложением. Это обычно классы, которые подразделяют UIView и используют UIKit.
View Models
Модель представления: Модель представления связывает модель и представление через механизм привязки данных. Если в модели изменяются значения свойств, при реализации моделью интерфейса INotifyPropertyChanged автоматически идет изменение отображаемых данных в представлении.
How do I use this?
Как я это использую: Этот шаблон используется для преобразования данных из класса модели в представление, которое работает для другого представления. Например, можно использовать модель представления для преобразования строки в NSAttributedString или даты в форматированную строку.
Этот шаблон похож на MVC, поэтому, возможно, его относительно просто добавить в кодовую базу MVC. Все, что вам нужно сделать, это просто добавить ваши классы моделей представления в существующую базу кода и использовать их для представления данных, как вам это нужно. Это минимизирует роль контроллера представления(View Controller), что помогает снять некоторый вес с классов контроллера представления. Вы тоже можете избежать “Massive View Controller”.
Disclaimer: MVVM не может помочь вам избежать массивной проблемы контроллера представления самостоятельно. Вы можете разнообразить нагрузку на класс контроллера представления, используя шаблоны проектирования совместно друг с другом, такие как шаблон делегирования, одноэлементный шаблон и т.д.
Давайте посмотрим, как MVVM работает в коде.
Откройте Xcode и создайте новый проект. Выберите “single view” на вкладке iOS для запуска. Нажмите на помощник редактора (значок с двумя пересекающимися кругами), чтобы отобразить окно Live View. Вы должны увидеть это:
Вы можете пойти дальше и удалить класс MyController. Мы будем настраивать наши представления вручную. Давайте представим, что мы работаем над приложением bird store. Начнем с создания модельного класса для птиц. Прямо под закрывающей скобкой для класса MyViewController добавьте следующий класс.
У каждой птицы есть имя, уровень редкости и изображение. Предположим, нам нужно показать эти свойства в представлении. Свойство rarity-это перечисление, которое нельзя отобразить в представлении без изображения, полезного для отображения элемента представления. Это идеальное время для создания модели представления птицы для этого изображения. Давайте попробуем отобразить цену каждой птицы в виде строки, основанной на уровне редкости птицы.
Добавьте следующий класс на площадку:
Вот что происходит в коде модели представления:
- Мы создаем свойство private bird типа Bird, чтобы иметь доступ к свойствам класса model. Мы также пишем метод init, чтобы установить свойство bird.
- Мы создаем два вычисляемых свойства, которые получают свои значения из свойств, связанных со свойством private bird. Мы не изменяем свойства, потому что они уже находятся в правильном изображении для View.
- Мы создаем свойство purchaseFeeText, которое является вычисляемым свойством. Это свойство использует значения редкости из свойства private bird для назначения стоимости с помощью оператора switch. Здесь наш класс модели представления берет данные из объекта класса модели и преобразует их в изображение, которое мы хотим использовать в представлении.
Теперь давайте напишем код для UIView, который мы будем использовать для отображения информации из класса view model. Добавьте следующий класс:
Вы можете скачать изображение, используемое imageView здесь . Добавьте его в папку ресурсы в навигаторе проектов и переименуйте в “ swifty.PNG”.
Теперь, когда класс представления птицы настроен, добавим код, чтобы увидеть его в playground live view. Добавьте следующее после закрывающей скобки класса BirdView:
Вот что происходит:
- Мы создаем новый экземпляр bird из класса модели “ swifty”
- Мы создаем новый экземпляр из класса view model из объекта swifty.
- Мы создаем свойство frame и инициализируем BirdView с помощью этого фрейма.
- Мы настраиваем представления, используя свойства экземпляра модели представления.
- Мы устанавливаем представление на playground live view, который затем отображает все в помощнике редактора.
Вы можете увидеть live view перейдя по “View>AssistantEditor>ShowAssistant Editor” в верхней строке меню.
When do I use this?
Когда я это использую?: Если вам необходимо использовать данные из класса модели в представлениях с различными представлениями данных(простите за тавтологию), имеет смысл использовать шаблон MVVM. MVVM, вероятно, не будет отправной точкой вашего приложения. Вы, вероятно, начнете с MVC. Следите за своими требованиями, вы всегда можете ввести MVVM (и большинство других шаблонов дизайна) в вашей кодовой базе позже.
Translated: medium
Help us with your claps
