swift mvvm_Swift中的MVVM设计模式概述

swift mvvm

by Azhar

由Azhar

Swift中的MVVM设计模式概述 (An overview of the MVVM design pattern in Swift)

This article assumes you are comfortable with the MVC pattern, which is the baseline design pattern adopted and recommended by Apple.

本文假定您对MVC模式感到满意，该模式是Apple采纳并推荐的基准设计模式。

什么是MVVM？ (What is MVVM?)

MVVM is a structural design pattern. Imagine that you have two views with a different layout that need to be populated with data from the same model class. MVVM allows you to use data from a single model class and represent it in different ways to populate a view.

MVVM是一种结构设计模式。 想象一下，您有两个布局不同的视图，需要用同一模型类中的数据填充。 MVVM允许您使用单个模型类中的数据，并以不同的方式表示它来填充视图。

楷模 (Models)

These hold the app data. These are the structs and classes that you have created to hold the data you receive from a REST API or from some other data source.

这些保存应用程序数据。 这些是您创建的用于保存从REST API或其他数据源接收的数据的结构和类。

观看次数 (Views)

These display UI elements on the screen. These are usually classes that subclass UIView and use UIKit.

这些将UI元素显示在屏幕上。 这些通常是子类UIView并使用UIKit的类。

查看模型 (View Models)

These classes are where you take the information from the model classes and transform them into values that can be displayed in a particular view.

这些类是您从模型类中获取信息并将其转换为可以在特定视图中显示的值的地方。

我该如何使用？ (How do I use this?)

Use this pattern to transform data from a model class to a representation that works for a different view. For example, you can use a view model to transform a String to an NSAttributedString or a Date into a formatted String.

使用此模式将数据从模型类转换为适用于其他视图的表示形式。 例如，可以使用视图模型将字符串转换为NSAttributedString或将日期转换为格式化的字符串。

This pattern is similar to MVC, which is perhaps why it is relatively simple to add it to an MVC codebase. All you need to do is simply add your view model classes to the existing codebase and use them to represent the data as you need it. This does minimize the role of the View Controller, which helps lift some weight off your View Controller classes. You too can avoid ‘Massive View Controller’.

这种模式类似于MVC，这也许就是为什么将其添加到MVC代码库中相对简单的原因。 您所要做的只是将视图模型类添加到现有代码库中，并根据需要使用它们来表示数据。 这确实使View Controller的作用最小化，从而有助于减轻View Controller类的负担。 您也可以避免使用“ Massive View Controller”。

Disclaimer: MVVM can’t help you avoid a massive view controller problem on its own. You can diversify the load on a view controller class by using design patterns in conjunction with each other, like the delegate pattern, singleton pattern etc.

免责声明 ：MVVM不能帮助您自己避免大型视图控制器问题。 您可以通过将设计模式彼此结合使用来分散视图控制器类的负载，例如委托模式，单例模式等。

Let’s see how MVVM works in code.

让我们看看MVVM如何在代码中工作。

Open up Xcode and create a new Playground project. Select Single View under the iOS tab to start. Click on the assistant editor (icon with two intersecting circles) to display the Live View window. You should see this.

打开Xcode并创建一个新的Playground项目。 选择iOS选项卡下的Single View开始。 单击助手编辑器(带有两个相交圆的图标)以显示“实时显示”窗口。 您应该看到这个。

You can go ahead and delete the MyController class. We will be setting up our views manually.

您可以继续删除MyController类。 我们将手动设置视图。

Let’s pretend we are working on a bird store app. Let’s start by creating a model class for Birds. Right below the closing brace for MyViewController class add the following class.

让我们假装我们正在开发一个鸟类商店应用程序。 让我们从为Birds创建一个模型类开始。 在MyViewController类的右括号下方，添加以下类。

Every bird has a name, rarity level, and an image. Let’s assume we need to show these properties on a view. The rarity property is an enum that we can’t display on a view without some kind of representation that is useful for a view element to render. This is a perfect time for us to create a bird view model for this representation. Let’s try to display the price of each bird as a string based on the rarity level of the bird.

每只鸟都有名字，稀有度和图像。 假设我们需要在视图上显示这些属性。 稀有属性是一个枚举，如果没有某种可用于视图元素呈现的表示形式，我们就无法在视图上显示该枚举。 这是我们为该表示创建鸟瞰模型的绝佳时机。 让我们尝试根据鸟类的稀有程度将其价格显示为字符串。

Add the following class to your playground.

将以下课程添加到您的游乐场。

Here’s what’s going on in the view model code:

这是视图模型代码中发生的事情：

1. We create a private bird property of type Bird so we can access the properties of the model class. We also write an init method to set the bird property.
   我们创建了类型为Bird的私有bird属性，因此我们可以访问模型类的属性。 我们还编写了一个init方法来设置bird属性。
2. We create two computed property that get their values from the properties associated with the private bird property. We don’t modify the properties because they are already in the right representation for our view.
   我们创建两个计算属性，这些属性从与private bird属性关联的属性中获取其值。 我们不修改属性，因为它们已经在我们视图的正确表示中。

3. We create a purchaseFeeText property that is a computed property. This property uses the rarity values from the private bird property to assign a cost using a switch statement. This is where our view model class is taking data from the model class object and converting it into a representation that we want to use in a view.

   我们创建一个PurchaseFeeText属性，它是一个计算属性。 此属性使用private bird属性中的稀有值来使用switch语句分配成本。 这是我们的视图模型类从模型类对象获取数据并将其转换为我们要在视图中使用的表示形式的地方。

Now let’s write code for the UIView that we will use to display information from the view model class. Add the following class to your playground file.

现在让我们为UIView编写代码，以用于显示视图模型类中的信息。 将以下课程添加到您的Playground文件中。

You can download the image being used by the imageView here. Add it to the Resources folder in the Project Navigator and rename it “swifty.png”.

您可以在此处下载imageView使用的图像。 将其添加到Project Navigator中的Resources文件夹中，并将其重命名为“ swifty.png”。

Now that we have our bird view class set up lets add the code to see it in the playground live view. Add the following after the closing brace of the BirdView class.

现在我们已经设置了鸟瞰视图类，现在可以添加代码以在游乐场实时视图中查看它。 在BirdView类的大括号后面添加以下内容。

Here’s what’s going on

这是怎么回事

1. We create a new bird instance from the model class named “swifty”
   我们从名为“ swifty”的模型类创建一个新的Bird实例。
2. We create a new instance from the view model class from the swifty object.
   我们从swifty对象的视图模型类创建一个新实例。
3. We create a frame property and then initialize the BirdView using that frame.
   我们创建一个frame属性，然后使用该框架初始化BirdView。
4. We configure the views using the view model instance’s properties.
   我们使用视图模型实例的属性配置视图。
5. We set the view to the playground live view which then renders everything into the assistant editor.
   我们将视图设置为运动场实时视图，然后将所有内容渲染到助手编辑器中。

You can see the live view by selecting View>Assistant Editor>Show Assistant Editor from the top menu bar.

你可以看到，通过选择视图 ＆gt实时取景;协助 NT艾迪 T 或＆G吨;展会屁股我STANT编辑从顶部的菜单栏。

我什么时候使用这个？ (When do I use this?)

If you find yourself needing to use data from a model class in views with different representations of the data it would make sense to use the MVVM pattern. MVVM is probably not going to be the starting point of your app. You will probably start with MVC. Keep an eye on your requirements, you can always introduce MVVM (and most other design patterns) at a later time in your codebase.

如果发现自己需要在具有不同数据表示形式的视图中使用模型类中的数据，那么使用MVVM模式将很有意义。 MVVM可能不会成为您应用程序的起点。 您可能会从MVC开始。 请留意您的需求，您以后总是可以在代码库中引入MVVM(和大多数其他设计模式)。

翻译自: https://www.freecodecamp.org/news/an-overview-of-the-mvvm-design-pattern-in-swift-fb815ea5da40/

swift mvvm