来到这家公司之后，接手这个项目中付费页面功能的开发，这个模块是从之前离职员工那里接受的。首先说一些这个页面的复杂程序，这个页面会根据不同的情况展示三个不同的页面，这个页面整体是采用TableView来写的，三个页面加起来总共有18中cell样式。在接手的时候，由于整个项目采用的是TableView，但是却没有使用重用机制，整个页面在滑动起来比较卡顿。
1.第一步优化，如果根据不同的情况展示不同的Cell
我们的项目采用的是MVVM的设计模式，重新对tableView代理方法返回行数，以及返回那些Cell做了一层重构。首先把每种cell定义成枚举。
typedef NS_ENUM(NSUInteger, YCIAPUITableViewCellStyle) {
YCIAPUITableViewCellStyleVipHeaderViewCell = 0, // vip黄色头部view
YCIAPUITableViewCellStyleGainCircumViewCell, // 周边
YCIAPUITableViewCellStyleCourseIntroductionViewCell, // 课程介绍
YCIAPUITableViewCellStyleGoodsListViewCell, // 商品
YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell, // vip特权
YCIAPUITableViewCellStyleStudyReportViewCell, // 学情报告
YCIAPUITableViewCellStyleTryForFreeViewCell, // 体验一下
YCIAPUITableViewCellStyleMyVipAssistantViewCell,// 会员客服
YCIAPUITableViewCellStylePaymentSwitchCell, // 切换金牌课程
YCIAPUITableViewCellStyleCircumIntroductionViewCell,//周边介绍
YCIAPUITableViewCellStyleIAPEmptyCell,//空cell
YCIAPUITableViewCellStyleGoldenHeaderViewCell, // 非会员头部
YCIAPUITableViewCellStyleAnimationThemeViewCell, // 全动画
YCIAPUITableViewCellStyleTeamIntroduceCell, // 团队
YCIAPUITableViewCellStyleCoursePredictViewCell, //课程预告
YCIAPUITableViewCellStyleLearningPhaseCell, // 课程学习阶段
YCIAPUITableViewCellStyleEfficientScoreCell, // 高效学习
};
然后定义三个数组分别去存放，三中不同情况下，应该展示的cell的样式，我这里做的处理是把枚举放到数组中。为什么要这样处理呢，就是在tableview代理方中，可以通过枚举来加载不同的cell
self.vipArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleVipHeaderViewCell),
@(YCIAPUITableViewCellStyleStudyReportViewCell),
@(YCIAPUITableViewCellStyleGoodsListViewCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleMyVipAssistantViewCell),
nil
];
self.noVipArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleGoldenHeaderViewCell),
@(YCIAPUITableViewCellStyleCourseIntroductionViewCell),
@(YCIAPUITableViewCellStyleTeamIntroduceCell),
@(YCIAPUITableViewCellStyleAnimationThemeViewCell),
@(YCIAPUITableViewCellStyleLearningPhaseCell),
@(YCIAPUITableViewCellStyleEfficientScoreCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleGoodsListViewCell),
@(YCIAPUITableViewCellStyleTryForFreeViewCell),
nil
];
self.switchArray = [NSMutableArray arrayWithObjects:
@(YCIAPUITableViewCellStyleGoldenHeaderViewCell),
@(YCIAPUITableViewCellStyleCourseIntroductionViewCell),
@(YCIAPUITableViewCellStyleTeamIntroduceCell),
@(YCIAPUITableViewCellStyleAnimationThemeViewCell),
@(YCIAPUITableViewCellStyleLearningPhaseCell),
@(YCIAPUITableViewCellStyleEfficientScoreCell),
@(YCIAPUITableViewCellStyleMoreVipPrivilegeViewCell),
@(YCIAPUITableViewCellStyleCoursePredictViewCell),
@(YCIAPUITableViewCellStylePaymentSwitchCell),
nil
];
接下来问题来了，对于每一种情况，展示的cell的个数又是不确定的，怎么保证，只展示需要展示的cell呢。 这个地方我偷了一个懒或者采用另外一种解决方法，就是把不需要展示的cell的高度设置成0。下面的这段代码写在VM中
- (CGFloat)cellHeight:(NSIndexPath *)indexPath{
if (self.switchType == YCIAPPaymentViewModelSwitchOn) {
if (self.isVip) { // 会员
// 学情报告解锁
if (indexPath.row == 1) {
if (!self.unlockLearningReport) { // 学情报告
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else if (indexPath.row == 2) {
if (!self.ycPay || !self.ycRenewPay) { // 商品列表
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else{
return UITableViewAutomaticDimension;
}
}else{ // 引导付费
if (indexPath.row == 7) {
if (!self.ycPay || !self.ycRenewPay) { // 商品列表
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else if (indexPath.row == 8){
if (!self.hasTryForFreeRights) { // 免费体验
return 0;
}else{
return UITableViewAutomaticDimension;
}
}else{
return UITableViewAutomaticDimension;
}
}
}else{ // 开关外
if (indexPath.row == 8) {
if (self.isVip) {
return UITableViewAutomaticDimension;
}else{
return 0;
}
}
return UITableViewAutomaticDimension;
}
return 0;
}
这种方法虽然不是最优解，但是相比每一种情况又要单独处理，每一个cell是否显示，还要单独处理显示cell以及不显示cell的高度，显得更加方便。
如果确定tableView应该展示几行呢，这个时候，我定义的三个数组就发挥作用了。
- (NSArray *)getVipArray{
return [self.vipArray copy];
}
- (NSArray *)getNoVipArray{
return [self.noVipArray copy];
}
- (NSArray *)getSwitchArray{
return [self.switchArray copy];
}
2.第二步优化，在控制器的tableView方法中该怎么使用呢？
// MARK:引导付费的cell
- (UITableViewCell *)loadTableCellOfNoVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getNoVipArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getNoVipArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
// MARK:会员的cell
- (UITableViewCell *)loadTableCellOfVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getVipArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getVipArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
// 返回开关外,课程预告 cell
- (UITableViewCell *)loadSwitchOffPredictionCellWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row > [[self.viewModel getSwitchArray] count]) {
return [[UITableViewCell alloc] init];
}
NSInteger cellStyleIndex = [[[self.viewModel getSwitchArray] objectAtIndex:indexPath.row] integerValue];
return [self cellWithType:cellStyleIndex];
}
3.第三步优化，解决tableView重用问题
可以先看一段之前的代码，这是之前返回cell的方法，if else 判断有几十个。这个代码已经难以维护，只要有新的需求就要改动很多地方。
// MARK:引导付费的cell
- (UITableViewCell *)loadTableCellOfNoVipWithIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row == 0) {
YCGoldenHeaderViewCell *cell = [[YCGoldenHeaderViewCell alloc]init];
return cell;
}else if (indexPath.row == 1) {
@weakify(self);
YCCourseIntroductionViewCell *introductiongView = [[YCCourseIntroductionViewCell alloc]initWithCourseDesignClick:^(YCCourseIntroductionViewButtonClickType type) {
@strongify(self);
[self showAlertWithType:type];
}];
return introductiongView;
}else if (indexPath.row == 2){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay) {
YCGoodsListViewCell *goodListView = [[YCGoodsListViewCell alloc] initWithGoodModelList:self.viewModel.goodsModelList payButtonClickBlock:[self returnClickPaymentButtonBlockWithPostionIsPage:YES] agreementClickBlock:[self pushToAgreementVC] agreementHidden:NO];
return goodListView;
}else if (self.viewModel.prizeActivity) {
// 周边介绍
YCCircumIntroductionViewCell *circumView = [[YCCircumIntroductionViewCell alloc] init];
return circumView;
}else {
// VIP特权
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}
}else if (indexPath.row == 3){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay) {
if (self.viewModel.prizeActivity) {
// 周边介绍
YCCircumIntroductionViewCell *circumView = [[YCCircumIntroductionViewCell alloc] init];
return circumView;
}else {
// VIP特权
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}
}else if (self.viewModel.prizeActivity) {
// VIP特权
YCMoreVipPrivilegeViewCell *privilegeView = [[YCMoreVipPrivilegeViewCell alloc]initWithIsBottom:[self.viewModel judgeMoreVipPrivilegeViewIsBottom]];
return privilegeView;
}else {
if (self.viewModel.unlockLearningReport) {
@weakify(self);
YCStudyReportViewCell *studyView = [[YCStudyReportViewCell alloc] initWithCheckStudyReportButtonClickBlock:^{
@strongify(self);
[self pushToStudyReportVC];
} isBottom:[self.viewModel judgeStudyReportViewIsBottom] isVip:self.viewModel.isVip];
return studyView;
}else {
// 体验一下
@weakify(self);
YCTryForFreeViewCell *tryForFreeView = [[YCTryForFreeViewCell alloc]initWithTryForFreeButtonClickBlock:^{
@strongify(self);
[self pushToTopicVCTryForFree];
} hasGreyBottom:[self.viewModel judgeHasPayButtonOnBottom]];
return tryForFreeView;
}
}
}else if (indexPath.row == 4){
if (self.viewModel.ycRenewPay && self.viewModel.ycPay && self.viewModel.prizeActivity) {
………………
大家可以对比一下下面的返回cell的方法，是不是感觉清爽了好多，对于一些逻辑处理都放在ViewModel中做处理了。如果有新的需求变化，比如添加新的cell或者减少cell直接在viewModel中操纵cell的数据就可以了。
在cellWithType:cellStyleIndex这个方法中，就是通过传入的枚举类型，返回不同的cell
- (UITableViewCell *)cellWithType:(YCIAPUITableViewCellStyle)style{
switch (style) {
case YCIAPUITableViewCellStyleVipHeaderViewCell:{ // vip头部视图
YCVipHeaderViewCell *vipHeaderViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCVipHeaderViewCell identifier]];
vipHeaderViewCell.feedbackBlock = [self returnFeedbackBlock];
return vipHeaderViewCell;
}
break;
case YCIAPUITableViewCellStyleGainCircumViewCell: { // 抱枕
YCGainCircumViewCell *gainCircumViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCGainCircumViewCell identifier]];
return gainCircumViewCell;
}
break;
case YCIAPUITableViewCellStyleCourseIntroductionViewCell:{ // 课程介绍
YCCourseIntroductionViewCell *introductiongViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCCourseIntroductionViewCell identifier]];
return introductiongViewCell;
}
break;
case YCIAPUITableViewCellStyleGoodsListViewCell: { // 商品列表
YCGoodsListViewCell *goodListViewCell = [self.tableView dequeueReusableCellWithIdentifier:[YCGoodsListViewCell identifier]];
goodListViewCell.goodsList = self.viewModel.goodsModelList;
goodListViewCell.payButtonBlock = [self returnClickPaymentButtonBlockWithPostionIsPage:YES];
goodListViewCell.agreementBlock = [self pushToAgreementVC];
goodListViewCell.questionClickBlock = [self pushToQuestionVC];
goodListViewCell.agreementHidden = NO;
goodListViewCell.isVip = self.viewModel.isVip;
goodListViewCell.isBottom = [self.viewModel judgeGoodsListIsBottom];
[goodListViewCell reloadData];
return goodListViewCell;
}
break;
……………………
在解决返回cell逻辑复杂的同时，我也顺被把cell的重用解决了一下，这个地方就不粘贴出来了，只要把每一个cell注册一下，准守tableView的注册机制就可了。难度在怎么把原来的cell直接初始化数据来填充布局，改成数据回来之后，再去更新cell的布局，这个大家都有经验，我就不说了。
