项目实例解析MVC模式下的UITableView

简介

重构项目的时候遇到一个比较有逻辑性的界面,重构前该界面是把所有的代码全堆在在了控制器,不封装,不模块化,一共有两千多行,重构后在控制器的代码量减少了4倍,整体看上去逻辑更加清晰了些,在这个1024的日子写一写~

先附上斯坦福教授的经典图片:

项目实例解析MVC模式下的UITableView_第1张图片


先看界面

项目实例解析MVC模式下的UITableView_第2张图片


项目实例解析MVC模式下的UITableView_第3张图片


提示:有5种身份:1、红队队长  2、红队队员 3、蓝队队长  4、蓝队队员  5、游客(尚未参加该场比赛的用户),图1 是红队队长身份对应的UI。

红队队长:修改红队队名、修改蓝队队名、邀请蓝队队长、邀请红队队员、生成费用分摊表、填写赛果、撤销比赛、分享赛果

蓝队队长:修改蓝队队名、邀请蓝队队员、退出比赛、生成费用分摊表、分享赛果

红队队员/蓝队队员:邀请红队/蓝队队友、退出比赛、查看费用分摊表、分享赛果

游客:参加比赛

总言之,就是整个界面会根据不同账户的身份动态显示不同的UI,不同的功能。

重构后的思路

项目实例解析MVC模式下的UITableView_第4张图片


解析

1、model负责解析数据:将从云端得到的json解析成model,可以自己解析数据也可以使用YYModel,这里看自己的喜好。

采用枚举的方式定义用户身份,

项目实例解析MVC模式下的UITableView_第5张图片


2、身份判断:接下去所有的业务逻辑全都基于该model,controller将得到的model并根据model的属性判断当前用户的身份(红队队长、蓝队队长、红队队员、蓝队队员、游客)。然后根据不同的身份处理不同的业务逻辑。

3、创建固定的UI:采用UITableView的方式,将四个模块分为四个组,前三个组为一行,第四组留言则根据model的留言数量reture相应的row,分组的原因是留言那个模块是动态改变并且每个留言的UI都一样,可以出列相同的cell复用,减少工作量和bug的产生率。

4、根据传入cell的model动态更改UI:在cell中重写set的方法刷新数据和控件的frame。

5、controller处理响应事件:在view的触发事件则通过delegate或者block回调给controller处理。

最后文件大致这样:

在controller中:处理业务逻辑

项目实例解析MVC模式下的UITableView_第6张图片


项目实例解析MVC模式下的UITableView_第7张图片


在model中:数据转换


在view中:初始化UI并刷新UI数据

项目实例解析MVC模式下的UITableView_第8张图片


总言之,就是针对需求选择最合适的控件构建UI,采用对应的设计模型进行解耦、数据传输展示。

参考视频:网易公开课斯坦福大学教授讲解MVC的模式:https://v.youku.com/v_show/id_XNTI4Mzc5NDQw.html

如有讲的不足的地方,敬请谅解并加以指正,谢谢~  QQ:1002282311

你可能感兴趣的:(项目实例解析MVC模式下的UITableView)