TableView之Component

auu.space

这种模式是我在上家公司的项目里用到的一种方式，整体来说就像是拼积木一样把各个展示组件、响应事件拆分出去，作为一个单独的类，然后通过工厂模式生产出来再组装展示。

image

在这里，我们把每个最小的封装组件叫做一个Component，每个事件的响应动作都叫做一个Action。

约定

这种模式对于后台的依赖性很强，前端只需要封装好不同的小组件和大概的框架即可，由后台提供来规定布局的样式和响应的事件，所以，前后端就必须有一个完全统一的约定。
下面是json数据格式：

{
    "component": {
        # 这种类型下的数据资源，当然也能`component`嵌套
        
        "action": {
            # 响应动作
        },
        # 组件类型
        "componentType": "word"
    },
}

举个例子，这是评论内容的一个视图：

      {
        "component" : {
          "action" : {
            "actionType" : "detail",
            "clearMsgNum" : "1",
            "flag" : "-3",
            "go_comments" : "1",
            "id" : "480151",
            "title" : "释然",
            "type" : "thread"
          },
          "componentType" : "postsNewMessage",
          "datetime" : "2016-11-02 17:44:26",
          "description" : "峨眉山，云中花岭",
          "messageCount" : "1",
          "messageGroupId" : "480151",
          "name" : "释然",
          "picUrl" : "http://s3.mingxingyichu.cn/group6/M00/92/78/wKgBjFUDbQaADktKAAXsk4b7S1s41.jpeg?imageMogr2/quality/95",
          "postSummary" : "http://ww2.sinaimg.cn/large/006AYr4pjw1f8s239mmx0j30m80de0ti.jpg",
          "userFansNum" : "6"
        },
        "message_type" : "thread_msg"
      }

我们在前端将模块分为了很多种，包括文字模块、图片模块、图文混排模块、视频播放模块、商品模块、推荐模块、标签模块等等数十上百个小模块，然后通过不同的嵌套达到页面展示的目的，如图(截取的是蘑菇街的图片，我们的APP貌似下架了)：

image

创建基类

因为所有的可封装的组件都是约定好的，所以可以做一个基类对设定的数据做统一的分离提取

• Component

@interface CustomComponent : UIView

@property (nonatomic,strong) CustomAction *firedAction;
@property (nonatomic, weak) NSDictionary *detailStars;
@property (nonatomic, retain) NSDictionary  *data;

-(id) initWithFrame:(CGRect)frame data:(NSDictionary *)data;
-(id) initWithContainer:(UIView *)container data:(NSDictionary *)data;
-(void) initUI;

-(CGFloat)getComponentHeightWithData:(NSDictionary *)data withRealWidth:(CGFloat)realWidth;

//点击action
-(void)fireAction;
-(void)fireActions:(NSInteger)index;
-(void)fireActionWith:(NSDictionary *)data;

@end

这里的点击事件或者根据Action自定义的事件是加在单独的Component里，一般都是加的一个点击的手势，其他的根据需求来做修改。
里面的具体实现就是View的定制，这里就不举例了。

• Action

@interface CustomAction : NSObject

// 统计信息
@property (nonatomic, copy) NSDictionary *trackEventInfor;  

-(id)initWith:(NSDictionary *)data;
-(void)initData;
-(void)fire;

@end

如视频播放的事件：

@implementation ActionVideo

- (void)fire {
    [super fire];
    NSString *videoUrl = [_data objectForKey:@"videoUrl"];
    if (![NSString isBlankString:videoUrl]) {
        NSURL *movieURL = [NSURL URLWithString:videoUrl];
        AutoRatoteMPMoviePlayerViewController *controller = [[AutoRatoteMPMoviePlayerViewController alloc] initWithContentURL:movieURL];
        controller.delegateController = self.delegateNavigationController;
        
        [controller play];
    }
}

@end

创建工厂类

• ComponentFactory

用于根据给定的数据创建每个小的组件

@implementation ComponentFactory

+(CustomComponent *)createComponentWithFrame:(CGRect)frame data:(NSDictionary *)data navigation:(UINavigationController *)delegteNavigarionController{
    
    NSString * componentStr = [ComponentFactory getComponentTypeWithData:data];
    Class someClass = NSClassFromString(componentStr);
    CustomComponent *cell = (CustomComponent *)[[someClass alloc] initWithFrame:frame data:data];
    
    cell.delegateNavigationController = delegteNavigarionController;
    return cell;
}

+(CGFloat )getComponentHeightWithData:(NSDictionary *)data withRealWidth:(CGFloat)realWidth{
    // 根据给定的数据内容来计算当前模块的高度
}

+(NSString *)getComponentTypeWithData:(NSDictionary *)data{
    NSString * componentStr = @"CustomComponent";
    NSString *componentType = data[@"component"][@"componentType"];
    
    if([@"word" isEqual:componentType]){
        componentStr = @"ComponentWord";
    }
    if([@"videoCell" isEqual:componentType]){
        componentStr = @"ComponentVideoCell";
    }
    if([@"calendar" isEqual:componentType]){
        componentStr = @"ComponentCalendar";
    }
    if ([@"calendarWorthy" isEqualToString:componentType]) {
        componentStr = @"ComponentCalendarWorthy";
    }
    
    // ...

    return componentStr;
}

+(CustomComponent *)createComponentWithContainer:(UIView *)view data:(NSDictionary *)data navigation:(UINavigationController *)delegteNavigarionController{
    CGRect frame = view.bounds;
    CustomComponent *cell = [ComponentFactory createComponentWithFrame:frame data:data navigation:delegteNavigarionController];
    return cell;
}

@end

可以看出，这里主要是把if-else的类型判断挪到这里来了。

• ActionFactory

@implementation ActionFactory

+(CustomAction *)createActionWithData:(NSDictionary *)data withDetaiStarData:(NSDictionary *)starDic navigation:(UINavigationController *)delegateNavigationController{
    CustomAction *action;
    if (![data isKindOfClass:[NSDictionary class]]) {
        return nil;
    }
    NSString *actionType = data[@"actionType"];
    if (!actionType) {
        return nil;
    }
    
    NSString *type = data[@"type"];
    NSString *child = data[@"child"];
    
    if ([@"livingShow" isEqualToString:actionType]) {   //直播播放
        action = [[ActionLiveShow alloc] initWith:data];
    }
    if ([@"thread" isEqualToString:actionType]) {
        if ([@"" isEqualToString:child]) {// 帖子列表
            action = [[ActionThread alloc] initWith:data];
        }
        if ([@"topiclist" isEqualToString:child]) {// 专题列表
            action = [[ActionTopicList alloc] initWith:data];
        }
    }
    
    if ([@"detail" isEqual:actionType]) {
        // 帖子详情页
        if ([@"thread" isEqual:type]) {
            action = [[ActionThreadDetail alloc]initWith:data];
        }
        // 用户空间详情页
        if ([@"user" isEqual:type]) {
            action=[[ActionSpace alloc] initWith:data];
        }
    }
    if ([@"list" isEqualToString:actionType]) {
        if ([@"msg" isEqualToString:type]) {    //消息回复我的，社区通知，活动通知
            action = [[ActionReplyMine alloc] initWith:data];
        }
        if ([@"msgEvent" isEqualToString:type]) {
            action = [[ActionActivityNoticeDetail alloc]initWith:data];
        }
    }

    return action;
}

@end

这里也是根据给定的数据来创建具体事件的实例。

页面使用实例

当然，由于数据的结构化，这完全可以做一层封装。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return _data.count;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSDictionary *dic = self.data[indexPath.row];
    NSInteger cellHeight = [ComponentFactory getComponentHeightWithData:dic withRealWidth:self.tableView.frame.size.width];
    return cellHeight;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CustomComponent *component;
    NSInteger row = [indexPath row];
    NSDictionary *data = _data[row];
    NSString * identifier= [NSString stringWithFormat:@"reuse%@", data[@"componentType"]];
    
    CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    
    if(cell == nil) {
        cell = [[CustomTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
        
        CGFloat cellHeight = [ComponentFactory getComponentHeightWithData:data withRealWidth:tableView.frame.size.width];
        CGRect frame = CGRectMake(0, 0, tableView.frame.size.width, cellHeight);
        component = [ComponentFactory createComponentWithFrame:frame data:data navigation:self.navigationController];
        cell.component = component;
    }
    
    component.data = data;
    component.row = row;
    
    return cell;
}

总结

这种模式很适合阅读内容的展示，特别是文章类型的页面，由于页面的展示样式有后台控制，所以就提供了更多可定制的可能性。
上面也只是一种粗糙的代码展示，要想深究，也可以在很多细节上做优化。
不过缺点也很明显，后台依赖性很强，而且表格视图的交互性不好，对于内容的更改、cell位置的调整都不方便。
总之来说，这也是对于某种需求而产生的一种书写的方式，找对应用场景，做好优化，这也会给我们的APP提供丰富的功能和开发体验。

数据的依赖性太强，而且有原来项目现成的代码，就懒得写demo了，将就着看吧。