Router设计

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

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

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

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

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

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

        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 , NativeReact Native 三端的跳转,更加方便维护。
  5. 啦啦啦啦。。。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值