最近在做重构，将一个2000+行代码的详情页重构到不足200行。200行的代码实现2000+行代码的的业务逻辑？！当然不是了。我只是把原本耦合在一个页面的业务逻辑合理有效的拆分到多个模块中了。

1背景

传统的MVC模式，业务代码都堆积在Activity中。随着业务需求的复杂，我们的页面文件代码量越来越多，类似房源详情这种可以达到2K+行。

例如Link的新房详情页面，2182行（单onClick回调方法占据了265行）。这样的代码存在着诸多问题，耦合性高，可读性差，维护成本非常大。本次采用新的架构方法（MVP+模块化），可以有效的解决以上问题。MVP模式解耦合。模块化职责分明，大大减少单文件代码量，有效提升可读性，降低维护成本。

2架构方案

基于MVP的设计模式，组合模块化（Part&ViewPart)。

3方案概述

3.1 MVP

MVP模式这里不多说，与传统的MVP模式不同的是，我们允许一个页面可以存在多个P，多个V，一个P可以对应多个V。这样是为了我们每个模块可以完成自己的职责。P层由Activity统一管理。当然如果一个PV独立于页面（且有复用性），则可以独立出这个PV。

3.2 模块化

模块化：简单的讲就是讲业务拆分为多个模块，每个模块尽可能独立的负责自己的逻辑处理与UI展示。这样以来就实现了职责分明，并且大大减少了主Activity或Fragment的代码量，而且维护起来也比较方便。

3.2.1 模块化的方式

我们使用Part&ViewPart来实现模块化。

3.2.2 Part

Part是我们一个页面的大容器中的每个模块，我们称之为Part.这里的大容器就是我们页面的流式容器，Part要求对应的大容器必须是LinearLayout。

我们提供一个BasePart抽象类，所有的Part都继承该类。我们先看一下BasePart的代码：

  1/**
  2 * 模块化基类<br/>
  3 * 必须满足以下条件：<br/>
  4 * 1.父容器必须是LinearLayout<br/>
  5 * 2.父容器的所有view都必须是通过Part添加的<br/>
  6 * 3.必须通过@#query方法创建part<br/>
  7 * 4.View添加位置必须固定且已知，暂不支持动态权重<br/>
  8 */
  9public abstract class BasePart<T> {
 10  private Context mContext;
 11  private LayoutInflater mInflate;
 12  private View mView;
 13  private ViewGroup mParent;
 14  private T mData;
 15  private String tag;
 16
 17  public static <D extends BasePart> D query(LinearLayout parent, Class<D> clazz) {
 18    return query(parent, clazz, null);
 19  }
 20
 21  public static <D extends BasePart> D query(LinearLayout parent, Class<D> clazz, String tag) {
 22    BasePart target;
 23    if (TextUtils.isEmpty(tag)) {
 24      tag = clazz.getSimpleName();
 25    }
 26    // 先根据tag从parent中取，如果没找到就创建。
 27    // 这里不check数据，调用bindData方法后再处理数据，回调onBindData
 28    target = findPartByTag(parent, tag);
 29    if (target == null) {
 30      target = createPart(clazz);
 31      target.mParent = parent;
 32      target.mContext = parent.getContext();
 33      target.mInflate = LayoutInflater.from(target.mContext);
 34      target.tag = tag;
 35    }
 36    return (D) target;
 37  }
 38
 39  public void bindData(T data) {
 40    mData = data;
 41
 42    LinkedHashMap<String, Boolean> mStateMap = (LinkedHashMap) mParent.getTag(R.id.part_state);
 43    if (mStateMap == null) {
 44      mStateMap = new LinkedHashMap<>();
 45      mParent.setTag(R.id.part_state, mStateMap);
 46    }
 47
 48    if (isValid(data)) {
 49      if (mView == null) {
 50        mView = onCreateView();
 51        ButterKnife.bind(this, mView);
 52        mView.addOnAttachStateChangeListener(new View.OnAttachStateChangeListener() {
 53          @Override
 54          public void onViewAttachedToWindow(View v) {
 55
 56          }
 57
 58          @Override
 59          public void onViewDetachedFromWindow(View v) {
 60            onDestroyView();
 61          }
 62        });
 63        // fixme 只有数据有效的part才会存储到view中
 64        mView.setTag(R.id.part_cache, this);
 65        // 把这个对象和view绑定
 66        init(mView);
 67        // 如果当前存储的数据中不包含这个tag，那么就直接add
 68        if (!mStateMap.containsKey(tag)) {
 69          mParent.addView(mView);
 70        } else {
 71          mParent.addView(mView, findAddPosition(mStateMap, tag));
 72        }
 73        mStateMap.put(tag, true);
 74      }
 75      onBindData(data);
 76    } else {
 77      if (mView != null) {
 78        mParent.removeView(mView);
 79      }
 80      mStateMap.put(tag, false);
 81    }
 82  }
 83
 84  protected final View inflate(@LayoutRes int resource) {
 85    return mInflate.inflate(resource, mParent, false);
 86  }
 87
 88  /**
 89   * 数据是否有效
 90   *
 91   * @param data data
 92   * @return false will remove relative view
 93   */
 94  protected abstract boolean isValid(T data);
 95
 96  protected abstract View onCreateView();
 97
 98  protected void onDestroyView() {
 99  }
100
101  /**
102   * 执行在{@link #bindData(Object)}之后，{@link #onBindData(Object)}之前，{@link #isValid(Object)==true}且view没有初始化时才会回调
103   */
104  protected abstract void init(View view);
105
106  /**
107   * 只用于子类实现，外界调用{@link #bindData(Object)}。
108   * 该方法在{@link #isValid(Object) == true }时才回调
109   *
110   * @param data data
111   */
112  protected abstract void onBindData(T data);
113
114  private static <D extends BasePart> D createPart(Class<D> clazz) {
115    try {
116      return clazz.getConstructor().newInstance();
117    } catch (Exception e) {
118      throw new RuntimeException(e);
119    }
120  }
121
122  private int findAddPosition(LinkedHashMap<String, Boolean> hashMap, String tag) {
123    // 查找指定tag之前的所有被添加的view的个数，作为add时候的index，必须保证该容器的所有view都是通过part添加的
124    int count = 0;
125    for (Map.Entry<String, Boolean> entry : hashMap.entrySet()) {
126      if (entry.getKey().equals(tag)) return count;
127      if (entry.getValue()) count++;
128    }
129    return count;
130  }
131
132  /**
133   * find target by tag,null if not exist
134   *
135   * @param tag tag
136   */
137  private static BasePart findPartByTag(ViewGroup parent, String tag) {
138    for (int i = 0; i < parent.getChildCount(); i++) {
139      View view = parent.getChildAt(i);
140      BasePart part = (BasePart) view.getTag(R.id.part_cache);
141      if (part.tag.equals(tag)) {
142        return part;
143      }
144    }
145    return null;
146  }
147
148  public T getData() {
149    return mData;
150  }
151
152  protected Context getContext() {
153    return mContext;
154  }
155
156  public LayoutInflater getInflate() {
157    return mInflate;
158  }
159
160  protected View getView() {
161    return mView;
162  }
163
164  protected ViewGroup getParent() {
165    return mParent;
166  }
167}

简单描述下，BasePart所做的事情：根据子类判断的数据是否有效，当数据有效时才会将子模块view添加到父容器中。这样无效的数据模块也就不会被添加进来，避免不必要的渲染浪费。添加进来的view会和对应的part做一个映射，并将part缓存下来，支持单独刷新某个Part。

下面来看下Part的使用方式。

首先我们要实现一个Part，BasePart是个抽象类，必须实现4个抽象方法。

 1public class XxxPart extends BasePart<T>{
 2  @Override
 3  protected boolean isValid(T data) {
 4    return false;
 5  }
 6
 7  @Override
 8  protected View onCreateView() {
 9    return null;
10  }
11
12  @Override
13  protected void init(View view) {
14
15  }
16
17  @Override
18  protected void onBindData(T data) {
19
20  }
21}

isValid用于判断数据是否有效，数据有效，我们的模块才会被加载，避免不必要的渲染
onCreateView用于创建View
init用于初始化
onBindData用于绑定数据

除了上面四个必须实现的方法，BasePart还提供一个非抽象的方法，==onDestroyView()==，用于处理销毁逻辑，如Handler，请求等。

接下来看一下，Part是怎么加载、调用的。Part的使用很简单，只需要调用query方法，并bindData就够了。query方法返回Part，因此支持模块间的相互调用及跨模块更新。

1public static <D extends BasePart> D query(LinearLayout parent, Class<D> clazz, String tag){...}

简单分析一下。query需要3个参数。

parent 即该模块所在的父容器，也就是我们前面说的页面大容器。
clazz 模块Part的class对象（是的，这里用的反射构建的Part的实例）
tag 每个Part都会有一个tag与之对应，为了我们缓存part。如果没有设置，会默认取class.simpleName

3.2.3 ViewPart

前面有说到我们这里的模块化分为Part和ViewPart。这里的ViewPart其实就是一个View。在非大容器中的模块，我们可以使用ViewPart的方式将其模块化。我们模块化的原则是尽量将各个模块的业务交由各个模块自己完成，职责分明，逻辑清晰。

简单介绍完这些概念之后，下面来具体看一下重构的过程。

4重构过程

4.1 梳理逻辑模块

新房房源详情页大大小小加一起，一共14个业务逻辑。其中除引导图外，其他我们均采用模块化的方式处理。分享逻辑和底部Bar采用ViewPart的方式，其他采用Part的方式。HouseDetailActivity采用MVP的模式。

分享引导图
分享逻辑
楼盘信息模块
一房一价模块
其他信息模块
竞对盘推荐模块
激励政策模块
动态模块
特价房模块
客户规则模块
佣金*规则模块
楼盘销售特点模块
户型模块
底部bar

4.2 主页面MVP架构

首先看一下，详情页整体的MVP契约类。

 1public interface HouseDetailContract {
 2  interface Present extends BasePresenter<View> {
 3    void getHouseResponse(String projectId);
 4
 5    void getShareResponse(String projectId);
 6
 7    void follow(String projectId, boolean follow);
 8  }
 9
10  interface View extends BaseView {
11    void onGetHouseResult(@NonNull NewHouseResBlockDetailBean data);
12
13    void onUpdateStateLayout(boolean isSuccess, boolean netError);
14  }
15
16  interface IFollowView extends IBaseView {
17    /**
18     * @param followed 是否已关注
19     * @param error null表示成功，false表示失败
20     */
21    void updateFollowState(boolean followed, String error);
22  }
23
24  interface IShareView extends IBaseView {
25    void onShare(ShareDialog.ShareToThirdAppBean shareBean, ShareDialog.ShareToSmsBean smsBean);
26
27    void onGetShareResultFail(String error);
28  }
29}

可以看到，这里一个P，有多个V。且逻辑中还有两个比较独立且被复用的PV，抽离出来了，这里不再列举。简单看下主Present的实现。

 1public class HouseDetailPresent extends HttpPresenter<HouseDetailContract.View>
 2  implements HouseDetailContract.Present {
 3
 4  private HouseDetailContract.IFollowView iFollowView;
 5  private HouseDetailContract.IShareView iShareView;
 6
 7  public void attachFollowView(HouseDetailContract.IFollowView iFollowView) {
 8    this.iFollowView = iFollowView;
 9  }
10
11  public void attachShareView(HouseDetailContract.IShareView iShareView) {
12    this.iShareView = iShareView;
13  }
14
15  @Override
16  public void getHouseResponse(String projectId) {
17    enqueue(ApiClient.create(HouseApi.class).getHousesDetailResult(projectId),
18      new SimpleCallback<Result<NewHouseResBlockDetailBean>>() {
19
20        @Override
21        protected void onNetworkError(HttpCall<Result<NewHouseResBlockDetailBean>> call, Throwable t) {
22          mView.onUpdateStateLayout(false, true);
23        }
24
25        @Override
26        public void onResponse(HttpCall<Result<NewHouseResBlockDetailBean>> call,
27          Result<NewHouseResBlockDetailBean> entity) {
28          if (hasData()) {
29            mView.onGetHouseResult(entity.data);
30            mView.onUpdateStateLayout(true, false);
31          } else {
32            mView.onUpdateStateLayout(false, false);
33          }
34        }
35      });
36  }
37
38  @Override
39  public void follow(String projectId, final boolean follow) {
40    enqueue(ApiClient.create(HouseApi.class).followResblock(projectId, follow ? 1 : 0),
41      new SimpleCallback<Result>() {
42        @Override
43        public void onResponse(HttpCall<Result> call, Result entity) {
44          if (isSuccess()) {
45            iFollowView.updateFollowState(follow, null);
46          } else {
47            iFollowView.updateFollowState(follow,
48              Result.getErrorMsg(entity, follow ? "关注失败" : "取消关注失败"));
49          }
50        }
51      }, true); // 是否需要loading
52  }
53
54  @Override
55  public void getShareResponse(String projectId) {
56    ...
57  }
58}

主Present会绑定其他两个模块的V，并完成对应的P层逻辑和V的回调。

再来看下我们的详情页，这里重点看下，获取到数据之后加载part的处理逻辑。

 1@Override
 2  public void onGetHouseResult(@NonNull NewHouseResBlockDetailBean data) {
 3    this.bean = data;
 4    setTitle(data.name);
 5    bottomPart.bindData(data);
 6    sharePart.bindData(data.projectName);
 7    initDMShare();
 8    BasePart.query(container, HouseDetailInfoPart.class).bindData(data);
 9    BasePart.query(container, OnePricePart.class).bindData(data);
10    BasePart.query(container, HouseDetailOtherInfoPart.class).bindData(data);
11    BasePart.query(container, RecommendPart.class).bindData(data);
12    BasePart.query(container, IncentivePolicyPart.class).bindData(data.incentivePolicy);
13    BasePart.query(container, DynamicPart.class).bindData(data.newDynamic);
14    BasePart.query(container, DiscountHousePart.class).bindData(data);
15    BasePart.query(container, CustomerRulePart.class).bindData(data.customerRule);
16    BasePart.query(container, CommissionRulePart.class).bindData(data.commissionRule);
17    BasePart.query(container, SaleFeaturePart.class).bindData(data.saleFeature);
18    BasePart.query(container, FramePart.class).bindData(data);
19  }

所有根据返回数据操作UI及逻辑都在这个方法里。其中bottomPart和sharePart就是两个普通的View。

下面看一个简单的Part。

 1public class IncentivePolicyPart extends BasePart<NewHouseResBlockDetailBean.IncentivePolicy> {
 2
 3  @BindView(R2.id.tv_encourage_policy_detail)
 4  CommonTextView tvEncouragePolicyDetail;
 5
 6  @Override
 7  protected boolean isValid(NewHouseResBlockDetailBean.IncentivePolicy data) {
 8    return data != null && !TextUtils.isEmpty(data.excitationPolicy);
 9  }
10
11  @Override
12  protected View onCreateView() {
13    return inflate(R.layout.lib_newhouse_detail_encourages_policy);
14  }
15
16  @Override
17  protected void init(View view) {
18    view.setOnClickListener(new View.OnClickListener() {
19      @Override
20      public void onClick(View v) {
21        if (!TextUtils.isEmpty(getData().excitationPolicyUrl)) {
22          CommonWebActivity.startActivity(getContext(), getData().excitationPolicyUrl,
23            getContext().getString(R.string.newhouse_jili_zhengce));
24        }
25      }
26    });
27  }
28
29  @Override
30  protected void onBindData(NewHouseResBlockDetailBean.IncentivePolicy bean) {
31    tvEncouragePolicyDetail.setText(bean.excitationPolicy);
32  }
33}

View创建和初始化，数据源的有效性判断和数据绑定，层次分明，方便维护。

ViewPart的代码稍多一些，这里简单取一部分代码。

 1public class HouseDetailBottomPart extends LinearLayout implements HouseDetailContract.IFollowView {
 2    ... // ButterKnife 初始化view
 3
 4    // 绑定present 和V
 5    public void setPresent(HouseDetailPresent present) {
 6        this.present = present;
 7        present.attachFollowView(this);
 8    }
 9
10    // 绑定数据，更新UI
11    public void bindData(NewHouseResBlockDetailBean bean) {
12      ...
13    }
14
15    @OnClick(R2.id.ll_attention)
16    void onFollow() { // 关注/取消关注
17        present.follow(bean.projectId, bean.isFollow == 0);
18    }
19
20    ...
21
22}

可以看到这里的PartView也用了MVP，自身便是个V。

到这里，我们已经大致看完了，Part模式相关的全部内容。下面来总结下Part的优点和存在的不足。

5优点

大量减少主控制器（Activity or Fragment)代码量
层次分明，解耦。各业务模块的业务由模块自身处理
无效的模块将不会被加载，避免不必要的渲染
支持模块局部刷新。某模块数据变化时，直接刷新该模块即可，不需要重建view，不影响其他模块
支持模块间的相互调用

6不足

Part的方式并不适用所有的页面，part主要解决的是线性容器下多模块的场景

父容器必须是LinearLayout且父容器的所有子view都必须是通过Part添加的
必须通过query方法创建part
View添加位置必须固定且已知，暂不支持动态权重

作者介绍：
公台（企业代号名），目前负责贝壳找房新房B端Android。

本文转载自公众号贝壳产品技术（ID：gh_9afeb423f390）。

原文链接：

https://mp.weixin.qq.com/s/LLt8u5WVLxLrg_acMXLvEA

创作场景

如何把 2000+ 行代码的详情页重构到不足 200 行