如何在复杂TableView界面开发中变得优雅

TableView界面可以说是移动App中最常用的界面之一了，物品/消息列表、详情编辑、属性设置……
几乎每个app都可以看到它的身影，如果不做分层处理，眉毛胡子一把抓，最后的扩展和维护简直是个噩梦，尤其是大型负责的模块页面。
所以如何优美地实现一个TableView界面，就成了iOS开发者的必备技能。

没有一套代码模式，就会使代码阅读者心里充满了不可知，无分类，无规律可循，杂乱的感觉，
`同时代码组织模式也是一种规范，有助于项目源码的阅读和管理。`

一般地，实现一个UITableView, 需要通过它的两套protocols，UITableViewDataSource和UITableViewDelegate，
来指定页面内容并响应用户操作。常用的方法有：

@protocol UITableViewDataSource- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;              
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
- (nullable NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section;
- (nullable NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section;
@end
 
@protocol UITableViewDelegate- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath;
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section;
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section;
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
@end

 //JWJTableViewDataSourceAndDelegate.h
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef void (^TableViewCellActionBlock)(NSIndexPath *indexPath,id item);

@interface JWJTableViewDataSourceAndDelegate : NSObject
<UITableViewDataSource,UITableViewDelegate>

- (id)initWithItems:(NSArray *)anItems
          cellClass:(Class)acellClass
     cellIdentifier:(NSString *)aCellIdentifier
    CellActionBlock:(TableViewCellActionBlock)cellActionBlock;

@end

//JWJTableViewDataSourceAndDelegate.m
#import "JWJTableViewDataSourceAndDelegate.h"
#import "JWJBaseTableViewCell.h"

@interface JWJTableViewDataSourceAndDelegate ()

@property (nonatomic, strong) NSArray *items;
@property (nonatomic, copy) NSString *cellIdentifier;
@property (nonatomic, weak) Class acellClass;
@property (nonatomic, copy) TableViewCellActionBlock actionBlock;

@end
@implementation JWJTableViewDataSourceAndDelegate

- (id)init{
    return nil;
}

- (id)initWithItems:(NSArray *)anItems
          cellClass:(Class)acellClass
     cellIdentifier:(NSString *)aCellIdentifier
 CellActionBlock:(TableViewCellActionBlock)cellActionBlock
{
    self = [super init];
    if (self) {
        self.items = anItems;
        self.cellIdentifier = aCellIdentifier;
        self.acellClass = acellClass;
        self.actionBlock = [cellActionBlock copy];
    }
    return self;
}

#pragma mark UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.items.count;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    id model = self.items[indexPath.row];
    // SDAutolayout 中的方法 推荐使用此普通简化版方法（一步设置搞定高度自适应，性能好，易用性好）
    return [tableView cellHeightForIndexPath:indexPath model:model keyPath:@"model" cellClass:self.acellClass contentViewWidth:WIDTH];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    JWJBaseTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:self.cellIdentifier
                                                             forIndexPath:indexPath];
    if (!cell) {
        cell = [[JWJBaseTableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:self.cellIdentifier];
    }
    id item = self.items[(NSUInteger) indexPath.row];
    cell.model = item;
    return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    id model = self.items[indexPath.row];
    self.actionBlock(indexPath, model);
}

//JWJBaseTableViewCell.h
#import <UIKit/UIKit.h>
@interface JWJBaseTableViewCell : UITableViewCell
@property (nonatomic, strong) id model;
@end

//实例中的 子类cell
#import <UIKit/UIKit.h>
#import "JWJBaseTableViewCell.h"
#import "IndexCellModel.h"

@interface IndexTableViewCell : JWJBaseTableViewCell
@property(strong,nonatomic)UILabel *leftTextLabel;
@property(strong,nonatomic)UILabel *rightTextLabel;
@property (nonatomic, strong) IndexCellModel *model;//  重写了父类中的model属性。
@end
不过值得一提的是需要在 子cell的 .m中 @synthesize model = _model; 否则会有警告。

 //IndexCellModel.h
#import <Foundation/Foundation.h>
@interface IndexModel : NSObject
@property(copy,nonatomic)NSString *str1;
@property(copy,nonatomic)NSString *str2;
@property(copy,nonatomic)NSString *method;
@end

@interface IndexCellModel : NSObject //这是一层  ViewModel 是对cell展示的数据的转化层

- (instancetype)initWithModel:(IndexModel *)model;
@property (strong, nonatomic) IndexModel * model;
@property (copy, nonatomic) NSString * titleText;
@property (copy, nonatomic) NSString * subTitleText;
@property (assign, nonatomic) SEL  methodName;

@end

//IndexCellModel.m
#import "IndexCellModel.h"
@implementation IndexModel
@end
@implementation IndexCellModel
- (instancetype)initWithModel:(IndexModel *)model;
{
    self = [super init];
    if (self) {
        self.model = model;
        self.titleText = model.str1;
        self.subTitleText = model.str2;
        self.methodName = NSSelectorFromString(model.method);
    }
    return self;
}

@end

#import <Foundation/Foundation.h>
#import "IndexCellModel.h"

@interface IndexViewModel : NSObject

- (NSArray *)backTableViewModel;
@end

#import "IndexViewModel.h"

@implementation IndexViewModel

- (NSArray *)backTableViewModel;
{
    NSMutableArray *dataArray =  [[NSMutableArray alloc]initWithCapacity:0];
    
    IndexModel *model = [IndexModel new];
    model.str1 = @"测试1";
    model.str2 = @"测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试";
    model.method = @"cellOneClick";
    IndexCellModel *cellmodel = [[IndexCellModel alloc]initWithModel:model];
    [dataArray addObject:cellmodel];
    
    IndexModel *model1 = [IndexModel new];
    model1.str1 = @"测试2";
    model1.str2 = @"测试2测试2测试2测试2测试2";
    model1.method = @"cellTwoClick";
    IndexCellModel *cellmodel1 = [[IndexCellModel alloc]initWithModel:model1];
    [dataArray addObject:cellmodel1];
    return dataArray;
}

 #import "IndexViewController.h"
#import "JWJTableViewDataSourceAndDelegate.h"
#import "IndexTableViewCell.h"
#include "IndexViewModel.h"

static NSString * const PhotoCellIdentifier = @"PhotoCell";

@interface IndexViewController ()
@property (nonatomic, strong) JWJTableViewDataSourceAndDelegate *tbDataSource;
@property (nonatomic, strong)IndexViewModel *viewModel;
@end

@implementation IndexViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"首页";
    self.view.backgroundColor = [UIColor whiteColor];
    
    TableViewCellActionBlock actionCell = ^(NSIndexPath *path, IndexCellModel *item) {
        if ([self respondsToSelector:item.methodName]) {
            [self performSelector:item.methodName withObject:path afterDelay:0];
        }
    };
    self.viewModel = [IndexViewModel new];
    NSArray *cellDataArray = [self.viewModel backTableViewModel];
    self.tbDataSource = [[JWJTableViewDataSourceAndDelegate alloc]initWithItems:cellDataArray
                                                                      cellClass:[IndexTableViewCell class] cellIdentifier:PhotoCellIdentifier
                                                                            CellActionBlock:actionCell];
    self.tableView.dataSource = self.tbDataSource;
    self.tableView.delegate = self.tbDataSource;
    [self.tableView registerClass:[IndexTableViewCell class] forCellReuseIdentifier:PhotoCellIdentifier];

}
// cell 上的点击事件
- (void)cellOneClick
{
   NSLog(@"%s",__FUNCTION__);
}
- (void)cellTwoClick
{
    NSLog(@"%s",__FUNCTION__);
}