【超强干货】蘑菇街App的组件化之路

本文为『移动前线』群在3月10日的分享总结整理而成，转载请注明来自『移动开发前线』公众号。

嘉宾介绍

蘑菇街李忠（花名银时，网名 limboy），多年客户端开发经验，目前主要负责移动端基础架构设计及核心技术难点攻克（以 iOS 为主），为集团所有 App 提供移动端解决方案。 热衷于尝试新技术，并在团队中推广，致力于以优秀的代码、新的理念拓宽工程师的思路和眼界，以提升团队整体作战能力为己任。

    在组件化之前，蘑菇街 App 的代码都是在一个工程里开发的，在人比较少，业务发展不是很快的时候，这样是比较合适的，能一定程度地保证开发效率。慢慢地代码量多了起来，开发人员也多了起来，业务发展也快了起来，这时单一工程开发模式就会显露出一些弊端：

• 耦合比较严重（因为没有明确的约束，「组件」间引用的现象会比较多）

• 容易出现冲突（尤其是使用 Xib，还有就是 Xcode Project，虽说有脚本可以改善：https://github.com/truebit/xUnique ）

• 业务方的开发效率不够高（只关心自己的组件，却要编译整个项目，与其他不相干的代码糅合在一起）

为了解决这些问题，就采取了「组件化」策略。它能带来这些好处：

• 加快编译速度（不用编译主客那一大坨代码了）

• 自由选择开发姿势（MVC / MVVM / FRP）

• 方便 QA 有针对性地测试

• 提高业务开发效率

先来看下，组件化之后的一个大概架构：

「组件化」顾名思义就是把一个大的 App 拆成一个个小的组件，相互之间不直接引用。那如何做呢？

实现方式

组件间通信

以 iOS 为例，由于之前就是采用的 URL 跳转模式，理论上页面之间的跳转只需 open 一个 URL 即可。所以对于一个组件来说，只要定义「支持哪些 URL」即可，比如详情页，大概可以这么做：

[MGJRouter registerURLPattern:@"mgj://detail?id=:id" toHandler:^(NSDictionary *routerParameters) {
  
    NSNumber *id = routerParameters[@"id"];
    // create view controller with id
    // push view controller}];

首页只需调用 [MGJRouter openURL:@"mgj://detail?id=404"] 就可以打开相应的详情页。

那问题又来了，我怎么知道有哪些可用的 URL？为此，我们做了一个后台专门来管理。

然后可以把这些短链生成不同平台所需的文件，iOS 平台生成 .{h,m} 文件，Android 平台生成 .java 文件，并注入到项目中。这样开发人员只需在项目中打开该文件就知道所有的可用 URL 了。

目前还有一块没有做，就是参数这块，虽然描述了短链，但真想要生成完整的 URL，还需要知道如何传参数，这个正在开发中。

还有一种情况会稍微麻烦点，就是「组件A」要调用「组件B」的某个方法，比如在商品详情页要展示购物车的商品数量，就涉及到向购物车组件拿数据。

类似这种同步调用，iOS 之前采用了比较简单的方案，还是依托于 MGJRouter，不过添加了新的方法 - (id)objectForURL:，注册时也使用新的方法进行注册