浅谈Angular路由复用策略


Posted in Javascript onOctober 04, 2017

一、引言

路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。

但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验;一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退……用户懵逼了。

Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用ComponentFactoryResolver 构建组件,这是路由的本质。

而每一个路由并不一定是一次性消费,Angular 利用 RouteReuseStrategy 贯穿路由状态并决定构建组件的方式;当然默认情况下(DefaultRouteReuseStrategy)像开头说的,一切都不进行任何处理。

RouteReuseStrategy 从2就已经是实验性,当前依然如此,这么久应该是可信任。

二、RouteReuseStrategy

RouteReuseStrategy 我称它为:路由复用策略;并不复杂,提供了几种办法通俗易懂的方法:

  • shouldDetach 是否允许复用路由
  • store 当路由离开时会触发,存储路由
  • shouldAttach 是否允许还原路由
  • retrieve 获取存储路由
  • shouldReuseRoute 进入路由触发,是否同一路由时复用路由

这看起来就像是一个时间轴关系,用一种白话文像是这样:把路由 /list 设置为允许复用(shouldDetach),然后将路由快照存在 store 当中;当 shouldReuseRoute 成立时即:再次遇到 /list 路由后表示需要复用路由,先判断 shouldAttach 是否允许还原,最后从 retrieve 拿到路由快照并构建组件。

当理解这一原理时,假如我们拿开头搜索列表返回的问题就变得非常容易解决。

三、一个示例

诚如上面说明的,只需要实现 RouteReuseStrategy 接口即可自定义一个路由利用策略。

1、创建策略

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this._cacheRouters[route.routeConfig.path].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

定义一个 _cacheRouters 用于缓存数据(路由快照及当前组件实例对象)。

  • shouldDetach 直接返回 true 表示对所有路由允许复用
  • store 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象;path等同RouterModule.forRoot中的配置。
  • shouldAttach 若 path 在缓存中有的都认为允许还原路由
  • retrieve 从缓存中获取快照,若无则返回null
  • shouldReuseRoute 进入路由触发,判断是否同一路由

2、注册

最后将策略注册到模块当中:

providers: [
 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

假设我们有这么一个路由配置:

RouterModule.forRoot([
 { path: 'search', component: SearchComponent },
 { path: 'edit/:id', component: EditComponent }
])

搜索组件用于搜索动作,并在根据搜索结果跳转至编辑页,保存后又回到最后搜索结果的状态(这部分代码我就不贴有兴趣见 plnkr)。

四、结论

上述只是一个简单的抛砖引玉作用,实则对于复用的判断会更复杂、滚动条位置、缓存清理等等。

善用这种路由复用策略机制可以解决很多Web体验上的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 #Javascript
You might like
url decode problem 解决方法
2011/12/26 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
tornado+celery的简单使用详解
2019/12/21 Python
如何理解python中数字列表
2020/05/29 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
中医专业应届生求职信
2013/11/17 职场文书
毕业生就业自荐信
2013/12/04 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
股份合作协议书
2014/04/12 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
酒店节能减排方案
2014/05/26 职场文书
生日庆典策划方案
2014/06/02 职场文书
学习十八大宣传标语
2014/10/09 职场文书
金秋助学感谢信
2015/01/21 职场文书
礼仪培训心得体会
2016/01/22 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书