文档章节

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

法斗斗
 法斗斗
发布于 2015/09/25 15:23
字数 1696
阅读 665
收藏 0

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


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 

  1. //  

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

  3. //  

  4.   

  5.   

  6.   

  7.   

  8. #import "AFNetworking.h"  

  9. #import "MBProgressHUD.h"  

  10. #import "UIImageView+AFNetworking.h"  


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




绑定的TestCell.swift类

  1. //  

  2. //  TestCell.swift  

  3. //  SwiftDemoUsingAF  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import UIKit  

  10.   

  11. class TestCell: UITableViewCell  

  12. {  

  13.   

  14.     @IBOutlet var imageView2: UIImageView!  

  15.     @IBOutlet var textLabel2: UILabel!  

  16.     @IBOutlet var location: UILabel!  

  17.     override func awakeFromNib()  

  18.     {  

  19.         super.awakeFromNib()  

  20.           

  21.    }  

  22.   

  23.     override func setSelected(selected: Bool, animated: Bool)  

  24.     {  

  25.         super.setSelected(selected, animated: animated)  

  26.           

  27.    }  

  28.       

  29.    /** 

  30.     *配置Cell的内容方法 

  31.   */  

  32.     func configCellWithStatusModel(model:StatusModel!)  

  33.     {  

  34.         self.imageView2.setImageWithURL(NSURL(string: model.imageURL), placeholderImage: UIImage(named: "placeHolder"))  

  35.         self.textLabel2.text = model.text  

  36.         self.location.text = model.location  

  37.     }  

  38.   

  39. }  



Cell上包含一个 imageView和两个label


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


StringConstant.swift

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

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

  1. //  

  2. //  StringConstant.swift  

  3. //  SwiftDemo  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import Foundation  

  10. import UIKit  

  11.   

  12.   

  13. let kGETSTATUSURL = "http://lovemyqq.sinaapp.com/getState.php"  

  14. let kACCESSTOKEN = "2.00HZE3aF0GvJSM551ca8e0920NF13N"  

  15. let kUID = "5117873025"  

  16. let kACCESSTOKENKEY = "access_token"  

  17. let kUIDKEY = "uid"  

  18. let kPARAMDIC = [kACCESSTOKENKEY : kACCESSTOKEN,kUIDKEY : kUID]  

  19. let kREDCOLOR = UIColor.redColor  

  20. let kIMAGEKEY = "image"  

  21. let kDATEKEY = "date"  

  22. let kLOCATIONKEY = "address"  

  23. let kCONTENTKEY = "content"  

  24. let kRESULTKEY = "result"  

  25. let kSTATEKEY = "state"  

  26.   

  27.   

  28. //其他复杂类型,可以使用函数定义  

  29. //func RGBA (r:CGFloat, g:CGFloat, b:CGFloat, a:CGFloat)  

  30. //{  

  31. //    return UIColor (red: r/255.0, green: g/255.0, blue: b/255.0, alpha: a)  

  32. //}  

  33.   

  34.   

  35.   

  36. //使用方法如下  

  37. //var theColor : UIColor = RGBA (255, 255, 0, 1)  



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


AFRequest.swift

  1. //  

  2. //  AFRequest.swift  

  3. //  SwiftDemo  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import UIKit  

  10.   

  11. public typealias SuccessBlock = (obj:AnyObject)->Void!  

  12. class AFRequest: NSObject  

  13. {  

  14.     var mainURL:String!  

  15.     var paramDict:[String:String]!  

  16.     var successBlock:SuccessBlock!  

  17.     var manager:AFHTTPRequestOperationManager  

  18.     var hud:MBProgressHUD!  

  19.   

  20.      

  21.     init(mainURL:String,paramDict:[String:String],successBlock:SuccessBlock)  

  22.     {  

  23.         self.mainURL = mainURL  

  24.         self.paramDict = paramDict  

  25.         self.successBlock = successBlock  

  26.         self.manager = AFHTTPRequestOperationManager()  

  27.         super.init()  

  28.     }  

  29.   

  30.       

  31.     func startRequestWithHUDOnView(view:UIView!)  

  32.     {  

  33.         self.hud = MBProgressHUD.showHUDAddedTo(view, animatedtrue)  

  34.         self.hud.labelText = "正在请求..."  

  35.    

  36.        var op =  self.manager.GET(self.mainURL,  

  37.             parametersself.paramDict,  

  38.             success: {  (operation: AFHTTPRequestOperation!,  

  39.                 responseObject: AnyObject!) in  

  40.                   

  41.                 var arr: AnyObject! = NSJSONSerialization.JSONObjectWithData(responseObject as NSData, options: NSJSONReadingOptions.AllowFragments, error: nil)  

  42.                   

  43.                 println(arr!)  

  44.                 unowned var unSelf:AFRequest = self  

  45.                unSelf.successBlock(obj: arr!)  

  46.                unSelf.hud.customView = nil  

  47.                unSelf.hud.labelText = "加载成功!"  

  48.                unSelf.hud.hide(false, afterDelay3)  

  49.             },  

  50.             failure: {  (operation: AFHTTPRequestOperation!,  

  51.                 error: NSError!) in  

  52.                 println("请求错误Error: " + error.localizedDescription)  

  53.                 unowned var unSelf:AFRequest = self  

  54.                 unSelf.hud.hide(true)  

  55.         })  

  56.           

  57.         op.responseSerializer = AFHTTPResponseSerializer()  

  58.         op.start()  

  59.     }  

  60.       

  61.       

  62. }  



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


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

StatusModel.swift

包含,属性,和存取器

  1. //  

  2. //  StatusModel.swift  

  3. //  SwiftDemoUsingAF  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import UIKit  

  10.   

  11. class StatusModel: NSObject  

  12. {  

  13.       

  14.     var imageURL:String!  

  15.     var text:String!  

  16.     var location:String!  

  17.       

  18.       

  19.       

  20.   override  init()  

  21.     {  

  22.         //Todo  

  23.     }  

  24.       

  25.       

  26.       

  27.     init(imageURL:String!,text:String,location:String)  

  28.     {  

  29.         self.imageURL = imageURL  

  30.         self.text = text  

  31.         self.location = location  

  32.     }  

  33.       

  34.     var configModel:(String!,String!,String!)  

  35.     {  

  36.         set  

  37.         {  

  38.             self.imageURL = newValue.0  

  39.             self.text = newValue.1  

  40.             self.location = newValue.2  

  41.         }  

  42.         get  

  43.         {  

  44.             return (self.imageURL,self.text,self.location)  

  45.         }  

  46.     }  

  47.       

  48.     //省略set的 简写的 get  

  49.     var urlOfImg:String  

  50.     {  

  51.         return self.imageURL  

  52.     }  

  53.      

  54. }  



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


解析JSON数据,绑定到Model中

StatusViewModel.swift

  1. //  

  2. //  StatusViewModel.swift  

  3. //  SwiftDemo  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import UIKit  

  10.   

  11. public class StatusViewModel: NSObject  

  12. {  

  13.   

  14.     func requestStatusList(view:UIView!,blk:SuccessBlock)  

  15.     {  

  16.           

  17.     var af = AFRequest(mainURL: kGETSTATUSURL, paramDict: kPARAMDIC)  

  18.         { (obj) -> Void! in  

  19.               

  20.               

  21.             var dicO = obj as Dictionary<String,AnyObject>  

  22.             var arr1: AnyObject? = dicO[kRESULTKEY]  

  23.             var  arrreal = arr1 as Array<Dictionary<String,Dictionary<String,String>>>  

  24.             var modelArray = Array<StatusModel>()  

  25.               

  26.             /** 解析得到的JSON数据为Model数组*/  

  27.             for dict in arrreal  

  28.             {  

  29.                 var dic = dict[kSTATEKEY]! as Dictionary<String,String>  

  30.                 var sModel = StatusModel()  

  31.                 sModel.imageURL = dic[kIMAGEKEY]!  

  32.                 sModel.text = dic[kCONTENTKEY]!  

  33.                 sModel.location = dic[kLOCATIONKEY]!  

  34.                 modelArray.append(sModel)  

  35.                   

  36.             }  

  37.             println(modelArray[0])  

  38.            blk(obj: modelArray)  

  39.               

  40.             return Void()  

  41.         }  

  42.     af.startRequestWithHUDOnView(view)  

  43.     

  44.    }  

  45.      

  46. }  



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


  1. //  

  2. //  TableViewController.swift  

  3. //  SwiftDemo  

  4. //  

  5. //  Created by MBinYang on 15/4/8.  

  6. //  Copyright (c) 2015年 cc.huanyouwang. All rights reserved.  

  7. //  

  8.   

  9. import UIKit  

  10.   

  11. class TableViewController: UITableViewController  

  12. {  

  13.   

  14.     var modelArray = Array<StatusModel>()  

  15.       

  16.     override func viewDidLoad()  

  17.     {  

  18.         super.viewDidLoad()  

  19.           

  20.          loadData()  

  21.           

  22.     }  

  23.   

  24.     override func didReceiveMemoryWarning()  

  25.     {  

  26.         super.didReceiveMemoryWarning()  

  27.           

  28.     }  

  29.   

  30.   

  31.     override func numberOfSectionsInTableView(tableView: UITableView) -> Int  

  32.     {  

  33.           

  34.         return 1  

  35.     }  

  36.   

  37.     override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int  

  38.     {  

  39.         return modelArray.count  

  40.     }  

  41.   

  42.       

  43.     override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell  

  44.     {  

  45.           

  46.       var sModel = self.modelArray[indexPath.row]  

  47.         var cell = tableView.dequeueReusableCellWithIdentifier("TestCell", forIndexPath: indexPath) as TestCell  

  48.   

  49.         cell.configCellWithStatusModel(sModel as StatusModel)  

  50.   

  51.         return cell  

  52.     }  

  53.       

  54.    /** 

  55.     * 第一次加载数据时请求 

  56.     * 返回为空 

  57.     */  

  58.     func loadData()  

  59.     {  

  60.         StatusViewModel().requestStatusList(self.view, blk: { (obj) -> Void! in  

  61.             unowned var weak_self:TableViewController = self  

  62.             println("这是第一次加载数据的 block\(__FUNCTION__)")  

  63.             weak_self.modelArray = obj as Array<StatusModel>  

  64.             weak_self.tableView.reloadData()  

  65.             return Void()  

  66.         })  

  67.     }  

  68.   

  69. }  


调用ViewModel之后再  reloadData()


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


8.总结


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

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



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


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


本文转载自:

法斗斗
粉丝 23
博文 368
码字总数 17774
作品 0
杨浦
程序员
私信 提问
OSChina 技术专题之 Swift 苹果全新开发语言

Swift 是苹果新推出的编程语言,专门针对 OS X 和 iOS 的应用开发。Swift 在各个方面优于 Objective-C,也不会有那么多复杂的符号和表达式。同时,Swift 更加快速、便利、高效、安全。除此之...

OSC编辑部
2014/11/10
4.2K
4
fir.im Weekly - 30 天从 0 开始学 Swift

最近一周看到很多很好用的的轮子,忍不住推荐给大家。此外,本期 fir.im Weekly 还精选了一些实用的 iOS , Android , UI 动画的干货文章。让我们一起来看下: Hacking with Swift 由@稀土圈...

风起云飞fir_im
2015/11/05
100
0
iOS自定义弹出视图、收音机APP、图片涂鸦、加载刷新、文件缓存等源码

iOS精选源码 一款优秀的 聆听夜空FM 源码(http://www.code4app.com/thread-14546-1-1.html) zhPopupController 简单快捷弹出自定义视图(http://www.code4app.com/thread-14861-1-1.html) WHS......

sunnyaigd
2018/06/04
24
0
iOS开发框架MVVM 1理解开发模式

好了,我作大死的连续第五天奋斗在电脑跟前了,好的。 接着上次写的iOS开发框架MVVM 1理解开发模式(占坑,未写完)来继续聊聊我们的MVVM。 昨天聊了网络层的封装,今天聊聊开发模式,架构师应...

testHs
09/29
0
0
iOS 学习资料整理

视频教程(英文) Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS SDK 的使用, 属于 iOS 基础视频 iPad and iPhone Applic...

拉偶有所依
2015/01/19
2.5K
5

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
15
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部