Swift教程17-淡化MVC,使用MVVM框架开发轻巧便于维护的iOS 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. //Usethisfiletoimportyourtarget'spublicheadersthatyouwouldliketoexposetoSwift.

3. //

8. #import"AFNetworking.h"

9. #import"MBProgressHUD.h"

10. #import"UIImageView+AFNetworking.h"

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

绑定的TestCell.swift类

//TestCell.swift

1. //SwiftDemoUsingAF

2. //CreatedbyMBinYangon15/4/8.

3. //Copyright(c)2015年cc.huanyouwang.Allrightsreserved.

4. //

6. importUIKit

8. classTestCell:UITableViewCell

9. {

11. @IBOutletvarimageView2:UIImageView!

12. textLabel2:UILabel!

13. location:UILabel!

14. overridefuncawakeFromNib()

15. {

16. super.awakeFromNib()

18. }

20. overridefuncsetSelected(selected:Bool,animated:Bool)

21. {

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

24. }

26. /**

27. *配置Cell的内容方法

28. */

29. funcconfigCellWithStatusModel(model:StatusModel!)

30. {

31. self.imageView2.setImageWithURL(NSURL(string:model.imageURL),0); background-color:inherit">placeholderImage:UIImage(named:"placeHolder"))

32. self.textLabel2.text=model.text

33. self.location.text=model.location

34. }

36. }

Cell上包含一个 imageView和两个label

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

StringConstant.swift

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

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

//StringConstant.swift

1. //SwiftDemo

2. //

4. importFoundation

5. importUIKit

8. letkGETSTATUSURL="http://lovemyqq.sinaapp.com/getState.php"

9. letkACCESSTOKEN="2.00HZE3aF0GvJSM551ca8e0920NF13N"

10. letkUID="5117873025"

11. letkACCESSTOKENKEY="access_token"

12. letkUIDKEY="uid"

13. letkPARAMDIC=[kACCESSTOKENKEY:kACCESSTOKEN,kUIDKEY:kUID]

14. letkREDCOLOR=UIColor.redColor

15. letkIMAGEKEY="image"

16. letkDATEKEY="date"

17. letkLOCATIONKEY="address"

18. letkCONTENTKEY="content"

19. letkRESULTKEY="result"

20. letkSTATEKEY="state"

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

24. //funcRGBA(r:CGFloat,g:CGFloat,b:CGFloat,a:CGFloat)

25. //{

26. //returnUIColor(red:r/255.0,green:g/255.0,blue:b/255.0,alpha:a)

27. //}

31. //使用方法如下

32. //vartheColor:UIColor=RGBA(255,255,1)

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

AFRequest.swift

//AFRequest.swift

1. publictypealiasSuccessBlock=(obj:AnyObject)->Void!

2. AFRequest:NSObject

3. {

4. varmainURL:String!

5. varparamDict:[String:String]!

6. varsuccessBlock:SuccessBlock!

7. varmanager:AFHTTPRequestOperationManager

8. varhud:MBProgressHUD!

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

12. {

13. self.mainURL=mainURL

14. self.paramDict=paramDict

15. self.successBlock=successBlock

16. self.manager=AFHTTPRequestOperationManager()

17. super.init()

18. }

21. funcstartRequestWithHUDOnView(view:UIView!)

22. {

23. self.hud=MBProgressHUD.showHUDAddedTo(view,0); background-color:inherit">animated:true)

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

26. varop=self.manager.GET(self.mainURL,

27. parameters:self.paramDict,0); background-color:inherit">success:{(operation:AFHTTPRequestOperation!,0); background-color:inherit">responseObject:AnyObject!)in

29. vararr:AnyObject!=NSJSONSerialization.JSONObjectWithData(responseObjectasNSData,0); background-color:inherit">options:NSJSONReadingOptions.AllowFragments,0); background-color:inherit">error:nil)

31. println(arr!)

32. unownedvarunSelf:AFRequest=self

33. unSelf.successBlock(obj:arr!)

34. unSelf.hud.customView=nil

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

36. unSelf.hud.hide(false,0); background-color:inherit">afterDelay:3)

37. },

38. failure:{(operation:AFHTTPRequestOperation!,0); background-color:inherit">error:NSError!)in

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

40. unownedvarself

41. unSelf.hud.hide(true)

42. })

44. op.responseSerializer=AFHTTPResponseSerializer()

45. op.start()

46. }

49. }

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

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

StatusModel.swift

包含,属性,和存取器

//StatusModel.swift

1. StatusModel:NSObject

2. {

4. varimageURL:String!

5. vartext:String!

6. varlocation:String!

10. overrideinit()

11. {

12. //Todo

13. }

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

18. {

19. self.imageURL=imageURL

20. self.text=text

21. self.location=location

22. }

24. varconfigModel:(String!,String!,String!)

25. {

26. set

27. {

28. self.imageURL=newValue.0

29. self.text=newValue.1

30. self.location=newValue.2

31. }

32. get

33. {

34. return(self.imageURL,self.text,255); background-color:inherit">self.location)

35. }

36. }

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

39. varurlOfImg:String

40. {

41. returnself.imageURL

42. }

44. }

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

解析JSON数据,绑定到Model中

StatusViewModel.swift

//StatusViewModel.swift

1. publicStatusViewModel:NSObject

2. {

4. funcrequestStatusList(view:UIView!,blk:SuccessBlock)

5. {

7. varaf=AFRequest(mainURL:kGETSTATUSURL,0); background-color:inherit">paramDict:kPARAMDIC)

8. {(obj)->Void!in

11. vardicO=objasDictionary<String,AnyObject>

12. vararr1:AnyObject?=dicO[kRESULTKEY]

13. vararrreal=arr1asArray<Dictionary<String,Dictionary<String,String>>>

14. varmodelArray=Array<StatusModel>()

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

17. fordictinarrreal

18. {

19. vardic=dict[kSTATEKEY]!asDictionary<String,String>

20. varsModel=StatusModel()

21. sModel.imageURL=dic[kIMAGEKEY]!

22. sModel.text=dic[kCONTENTKEY]!

23. sModel.location=dic[kLOCATIONKEY]!

24. modelArray.append(sModel)

26. }

27. println(modelArray[0])

28. blk(obj:modelArray)

30. returnVoid()

31. }

32. af.startRequestWithHUDOnView(view)

34. }

36. }

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

//TableViewController.swift

1. TableViewController:UITableViewController

2. {

4. varmodelArray=Array<StatusModel>()

6. overridefuncviewDidLoad()

7. {

8. super.viewDidLoad()

10. loadData()

12. }

14. overridefuncdidReceiveMemoryWarning()

15. {

16. super.didReceiveMemoryWarning()

18. }

21. overridefuncnumberOfSectionsInTableView(tableView:UITableView)->Int

22. {

24. return1

25. }

27. overridefunctableView(tableView:UITableView,numberOfRowsInSectionsection:Int)->Int

28. {

29. returnmodelArray.count

30. }

33. overridefunctableView(tableView:UITableView,cellForRowAtIndexPathindexPath:NSIndexPath)->UITableViewCell

34. {

36. varsModel=self.modelArray[indexPath.row]

37. varcell=tableView.dequeueReusableCellWithIdentifier("TestCell",0); background-color:inherit">forIndexPath:indexPath)asTestCell

39. cell.configCellWithStatusModel(sModelasStatusModel)

41. returncell

42. }

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

45. *返回为空

46. */

47. funcloadData()

48. {

49. StatusViewModel().requestStatusList(self.view,0); background-color:inherit">blk:{(obj)->Void!in

50. unownedvarweak_self:TableViewController=self

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

52. weak_self.modelArray=objasArray<StatusModel>

53. weak_self.tableView.reloadData()

54. returnVoid()

55. })

56. }

58. }

调用ViewModel之后再 reloadData()

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

8.总结

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

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

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

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