Swift教程17-淡化MVC,使用MVVM框架开发轻巧便于维护的iOS/android app

Swift 2020-05-16

MVVM是微软提出一种移动开发框架,旨在针对传统的MVC框架,解决传统的MVC框架的控制器的臃肿问题.

M:

Model模型,也就是数据模型;比如一条微博,对应的所有字段合成一条微博整体,这个整体就是Model


V:

View视图,只用来显示的视图,如 iOS的UIView,Cell;当然在 iOS中 Storyboard中,view总是和控制器关联,这并不是严格的view

如果我们纯手写代码定义一个view那么就是一个比较严格的view了


VM:

ViewModel视图模型,是将一个 View 和 Model进行绑定;起着桥梁的作用

例如一个 微博 cell,对应的数据绑定到一个 Model,将获得的数据绑定到Model个各个属性上.


传统的MVC中的 C代表 控制器,负责逻辑处理 和 数据绑定,更新视图;代码过于复杂,维护会比较困难;

而MVVM框架则是,给 Controller控制器减负;

把网络请求,数据绑定,更新视图,都剥离出去;

是在 Controller中做的仅仅是简单的跳转和部分代理


比较符合MVVM开发框架的是 使用TableView的控制器;Cell自定义;定义所需的Model;定义ViewModel调用对应的接口


下面来示范一个MVVM框架开发,带有网络请求的Demo



目录说明:

Resourse:存放图片,音频视频文件,IB文件

Controllers:存放视图控制器

Vender:开源框架,或者自己封装的组件

UtilTools:封装的常用代码,常量定义,配置文件等

ViewModel:根据不同的View获取不同的数据并且绑定到Model中

View:自定义个视图如 cell或者纯手写的view

Model:数据模型,就是View所需的所有字段的整体


实现效果:

一个tableView上显示多条动态包括,图片,文字;



技术要点:

MVVM框架

AFNetworking网络请求

MBProgressHUD等待提示

自定义cell

Block闭包传值,封装代码


实现过程:

1.导入Oc的相关框架


在Swift项目中新建一个Oc文件,系统询问你是否新建一个 桥接Oc的文件,选择是,生成一个 Header.h文件;在其中导入 对应的Oc的 头文件即可使用

如图,工程中有一个 SwiftDemo-Bridging-Header.h文件

导入AF等框架

SwiftDemo-Bridging-Header.h

//
//  Use this file to import your target's public headers that you would like to expose to Swift.
//




#import "AFNetworking.h"
#import "MBProgressHUD.h"
#import "UIImageView+AFNetworking.h"

2.使用Storyboard创建一个自定义的cell绑定到cell类,标识符是 TestCell




绑定的TestCell.swift类

//
//  TestCell.swift
//  SwiftDemoUsingAF
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import UIKit

class TestCell: UITableViewCell
{

    @IBOutlet var imageView2: UIImageView!
    @IBOutlet var textLabel2: UILabel!
    @IBOutlet var location: UILabel!
    override func awakeFromNib()
    {
        super.awakeFromNib()
        
   }

    override func setSelected(selected: Bool,animated: Bool)
    {
        super.setSelected(selected,animated: animated)
        
   }
    
   /**
    *配置Cell的内容方法
  */
    func configCellWithStatusModel(model:StatusModel!)
    {
        self.imageView2.setImageWithURL(NSURL(string: model.imageURL),placeholderImage: UIImage(named: "placeHolder"))
        self.textLabel2.text = model.text
        self.location.text = model.location
    }

}


Cell上包含一个 imageView和两个label


3.常量定义,类似Oc的宏定义


StringConstant.swift

常量以小写k开头,其余大写;可以配上下划线

Swift的常量,使用 let定义常量;可以在其他地方使用

//
//  StringConstant.swift
//  SwiftDemo
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import Foundation
import UIKit


let kGETSTATUSURL = "http://lovemyqq.sinaapp.com/getState.php"
let kACCESSTOKEN = "2.00HZE3aF0GvJSM551ca8e0920NF13N"
let kUID = "5117873025"
let kACCESSTOKENKEY = "access_token"
let kUIDKEY = "uid"
let kPARAMDIC = [kACCESSTOKENKEY : kACCESSTOKEN,kUIDKEY : kUID]
let kREDCOLOR = UIColor.redColor
let kIMAGEKEY = "image"
let kDATEKEY = "date"
let kLOCATIONKEY = "address"
let kCONTENTKEY = "content"
let kRESULTKEY = "result"
let kSTATEKEY = "state"


//其他复杂类型,可以使用函数定义
//func RGBA (r:CGFloat,g:CGFloat,b:CGFloat,a:CGFloat)
//{
//    return UIColor (red: r/255.0,green: g/255.0,blue: b/255.0,alpha: a)
//}



//使用方法如下
//var theColor : UIColor = RGBA (255,255,1)


4.封装AF为一个常用的方法,便于ViewModel调用


AFRequest.swift

//
//  AFRequest.swift
//  SwiftDemo
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import UIKit

public typealias SuccessBlock = (obj:AnyObject)->Void!
class AFRequest: NSObject
{
    var mainURL:String!
    var paramDict:[String:String]!
    var successBlock:SuccessBlock!
    var manager:AFHTTPRequestOperationManager
    var hud:MBProgressHUD!

   
    init(mainURL:String,paramDict:[String:String],successBlock:SuccessBlock)
    {
        self.mainURL = mainURL
        self.paramDict = paramDict
        self.successBlock = successBlock
        self.manager = AFHTTPRequestOperationManager()
        super.init()
    }

    
    func startRequestWithHUDOnView(view:UIView!)
    {
        self.hud = MBProgressHUD.showHUDAddedTo(view,animated: true)
        self.hud.labelText = "正在请求..."
 
       var op =  self.manager.GET(self.mainURL,parameters: self.paramDict,success: {  (operation: AFHTTPRequestOperation!,responseObject: AnyObject!) in
                
                var arr: AnyObject! = NSJSONSerialization.JSONObjectWithData(responseObject as NSData,options: NSJSONReadingOptions.AllowFragments,error: nil)
                
                println(arr!)
                unowned var unSelf:AFRequest = self
               unSelf.successBlock(obj: arr!)
               unSelf.hud.customView = nil
               unSelf.hud.labelText = "加载成功!"
               unSelf.hud.hide(false,afterDelay: 3)
            },failure: {  (operation: AFHTTPRequestOperation!,error: NSError!) in
                println("请求错误Error: " + error.localizedDescription)
                unowned var unSelf:AFRequest = self
                unSelf.hud.hide(true)
        })
        
        op.responseSerializer = AFHTTPResponseSerializer()
        op.start()
    }
    
    
}


5.根据View/Cell所需的数据,封装一个Model类.


如 封装一个 和 Cell数据字段对应的Model类 StatusModel状态模型

StatusModel.swift

包含,属性,和存取器

//
//  StatusModel.swift
//  SwiftDemoUsingAF
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import UIKit

class StatusModel: NSObject
{
    
    var imageURL:String!
    var text:String!
    var location:String!
    
    
    
  override  init()
    {
        //Todo
    }
    
    
    
    init(imageURL:String!,text:String,location:String)
    {
        self.imageURL = imageURL
        self.text = text
        self.location = location
    }
    
    var configModel:(String!,String!,String!)
    {
        set
        {
            self.imageURL = newValue.0
            self.text = newValue.1
            self.location = newValue.2
        }
        get
        {
            return (self.imageURL,self.text,self.location)
        }
    }
    
    //省略set的 简写的 get
    var urlOfImg:String
    {
        return self.imageURL
    }
   
}


6.ViewModel根据View所需数据,调用对应的接口;并且把数据绑定到Model中


解析JSON数据,绑定到Model中

StatusViewModel.swift

//
//  StatusViewModel.swift
//  SwiftDemo
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import UIKit

public class StatusViewModel: NSObject
{

    func requestStatusList(view:UIView!,blk:SuccessBlock)
    {
        
    var af = AFRequest(mainURL: kGETSTATUSURL,paramDict: kPARAMDIC)
        { (obj) -> Void! in
            
            
            var dicO = obj as Dictionary<String,AnyObject>
            var arr1: AnyObject? = dicO[kRESULTKEY]
            var  arrreal = arr1 as Array<Dictionary<String,Dictionary<String,String>>>
            var modelArray = Array<StatusModel>()
            
            /** 解析得到的JSON数据为Model数组*/
            for dict in arrreal
            {
                var dic = dict[kSTATEKEY]! as Dictionary<String,String>
                var sModel = StatusModel()
                sModel.imageURL = dic[kIMAGEKEY]!
                sModel.text = dic[kCONTENTKEY]!
                sModel.location = dic[kLOCATIONKEY]!
                modelArray.append(sModel)
                
            }
            println(modelArray[0])
           blk(obj: modelArray)
            
            return Void()
        }
    af.startRequestWithHUDOnView(view)
  
   }
   
}


7.TableViewController 控制器中调用 ViewModel显示数据


//
//  TableViewController.swift
//  SwiftDemo
//
//  Created by MBinYang on 15/4/8.
//  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.
//

import UIKit

class TableViewController: UITableViewController
{

    var modelArray = Array<StatusModel>()
    
    override func viewDidLoad()
    {
        super.viewDidLoad()
        
         loadData()
        
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        
    }


    override func numberOfSectionsInTableView(tableView: UITableView) -> Int
    {
        
        return 1
    }

    override func tableView(tableView: UITableView,numberOfRowsInSection section: Int) -> Int
    {
        return modelArray.count
    }

    
    override func tableView(tableView: UITableView,cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
    {
        
      var sModel = self.modelArray[indexPath.row]
        var cell = tableView.dequeueReusableCellWithIdentifier("TestCell",forIndexPath: indexPath) as TestCell

        cell.configCellWithStatusModel(sModel as StatusModel)

        return cell
    }
    
   /**
    * 第一次加载数据时请求
    * 返回为空
    */
    func loadData()
    {
        StatusViewModel().requestStatusList(self.view,blk: { (obj) -> Void! in
            unowned var weak_self:TableViewController = self
            println("这是第一次加载数据的 block\(__FUNCTION__)")
            weak_self.modelArray = obj as Array<StatusModel>
            weak_self.tableView.reloadData()
            return Void()
        })
    }

}

调用ViewModel之后再 reloadData()


当然,ViewModel也可能是 在 View上调用的;比如 Cell上有一个 按钮,点击按钮会进行网络请求,也需要调用 ViewModel


8.总结


我们可以看到 在 TableViewController 中,代码非常的少.原来对应 网络请求,对于 视图更新都是放在 controller中;

使用MVVM后可以大大减少Controller的代码,是的各部分耦合性更低,更便于维护.



9.其他,view上有事件的触发


如果 Cell或者 View上或者有 点击事件,或者其他事件;可以 使用 闭包封装 ;类似于 上面的 AF请求.



Swift系列教程:http://www.jb51.cc/cata/272739

相关文章

效率成吨提升之代码生成器-蓝湖工具神器iOS,Android,Swift,Flutter
软件简介:蓝湖辅助工具,减少移动端开发中控件属性的复制和粘...
【Audio音频开发】音频基础知识及PCM技术详解
现实生活中，我们听到的声音都是时间连续的，我们称为这种信...
见过仙女蹦迪吗？一起用python做个小仙女代码蹦迪视频
前言最近在B站上看到一个漂亮的仙女姐姐跳舞视频，循环看了亿...
【Android App】实战项目之仿抖音的短视频分享App附源码和演示视频 超详细必看
【Android App】实战项目之仿抖音的短视频分享App（附源码和...
自定义ava数据集及训练与测试 完整版 时空动作/行为 视频数据集制作 yolov5, deep sort, VIA MMAction, SlowFast
前言这一篇博客应该是我花时间最多的一次了，从2022年1月底至...
【视频+源码】登录鉴权的三种方式：token、jwt、session实战分享
因为我既对接过session、cookie，也对接过JWT，今年因为工作...