Router设计

更多博客 https://70kg.info

  最近公司的项目要进行页面间跳转的重构，首先项目是单 Activity + 多 Fragment 的结构，因为是电商的项目，所以涉及到很多 H5 , Native 和 React Native 页面之间的交互与跳转，这篇不是介绍两者之间是如何进行通信的，而是当 H5 或者外部分享的链接打开后传递过来 Uri 要解析跳转到 Native 的页面的处理。当然各个页面的 Host 是提前统一定义好的，具体的做法这里也不说了，也没什么难点。原来的写法是都放到一个 Util 类里面，各种 Switch Case 来进行分支判断，当项目越来越大维护起来十分的困难，而且本身 Native 的页面之间还有一套跳转的逻辑，同时维护两套的代价是很大的，所有希望将项目重构一下，统一两端的处理逻辑，就产生了下面的这个路由结构。

  在开始重构之前，也是去搜索了一下网上的一些开源例子，绝大多数都是基于 Activity 的跳转，写的功能虽然很多，但是对于我们的项目却是很冗余并且也不怎么合适，所以要去定制一套适合自己的路由，目标就是统一 H5 , Native 和 React Native 这三端之间的跳转逻辑，同时做到简单易用，容易维护和容易拓展。去写人人都能很容易看的懂的代码，而不是写那么花里胡哨的各种”炫技”的代码。

  先放一下这个项目的类图，不怎么熟悉 UML,里面有些关系表示的不正确，大概的意思还是可以表达出来的。首先要去统一两端的逻辑，肯定需要在跳转直接转换成统一的 Uri 进行跳转，从 H5 过来的就很简单就是个 Uri,而 Native 的跳转则要去进行处理拼接，然后通过统一的路由进行处理，最后跳转到具体的页面。

  先说一下设计的思想，一个页面对应一个 Uri,并且使用不同的 Host 或者 Path 进行区分和信息的传递，这里先建立了一个全局的”路由表”,让 Url 和一个具体页面的切换器进行对应，当路由获取到一个 Uri 的时候，在路由表中找到对应的切换器，切换到具体的页面。当然在切换之前还需要一些其他的处理，这里加入了拦截器的机制，默认实现了两种拦截器，LoginInterceptor 和 LogInterceptor 分别进行需要登录页面的 Uri 的拦截使其跳转到登录页面和打印 Uri 和其他跳转参数。当然也可以去实现其他的拦截器，这样就使得整个路由十分的灵活。

  说一下怎么使用，首先在 Application 中初始化路由表，这个路由表是个 pageMap : Map<String, Switcher> ，这里的 Key 就是每个页面对应的 Host ,Value 的 Switcher 就是处理每个页面切换逻辑的地方，类似这样：

        pageMap.put(REACT_NATIVE, new RnSwitcher());        pageMap.put(SCHEMA_HTTP, new H5Switcher());        pageMap.put(HOST_CATALOG, new CatalogDetailSwitcher());

这样就初始化了全局的路由表。因为是单 Activity +多 Fragment 的结构，几乎所有的页面都是 Fragment ,不像切换 Activity 那么简单，这里要去处理相对复杂的 Fragment 的切换逻辑和维护回退栈的操作，所以封装了一个 NavigationManager 用来处理这些操作。看一下初始化的过程：

    Router.install(mNavigationManager)                .addInterceptor(new LoginInterceptor())                .addInterceptor(new LogInterceptor());

因为要持有 Activiry 所以要在 onDestroy 的时候及时释放引用 ：

Router.unInstall();

然后看一下具体的跳转：

Router.config().setUri(uri).start()

这样就可以跳转到具体的页面了，当然只是简单的示例一下，实际使用的时候肯定还有其他的配置。因为使用者不可能记得每个页面的 Uri 是怎么拼接的，所以还可以在写个工具类来封装一下，这个就不说了。

  说一下这个路由的优点：

1. 简单易懂，几乎人人都读得懂，基本不需要学习成本。更没有任何的注解反射之类的。
2. 方便统一进行跳转管理，使用了拦截器，可以打印出跳转中的 Uri 和其他参数，调试十分方便。加入了登录拦截器，使得跳转可以无脑跳转，无需关心页面是否需要登录，路由帮你做好了判断和后续登录成功跳转到目标页面。
3. 容易拓展，无论是新增页面还是修改维护旧页面。将每个页面切换逻辑封装到对应的 Switcher 里面，快速定位。
4. 统一 H5 , Native 和 React Native 三端的跳转，更加方便维护。
5. 啦啦啦啦。。。

  以后甚至可以将路由表让服务端去控制，无论是灵活性还是稳定性都大大提高，只是目前还没有这样的需求，但是改造起来将十分的简单。这个路由从设计到项目的改造大概花了一周的时间，也算是独立设计开发的完整的重要模块，现在还处于比较初级的阶段，肯定有提升空间。目前用在 波罗蜜全球购 的 Android 客户端中，欢迎大家支持。