浅谈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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
jquery随机展示头像代码
Dec 21 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JavaScript模拟push
Mar 06 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
详解JS函数防抖
Jun 05 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
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
详解JS函数防抖
2020/06/05 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python numpy数组转置与轴变换
2019/11/15 Python
几个人围成一圈的问题
2013/09/26 面试题
《太阳》教学反思
2014/02/21 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
本科生自荐信
2014/06/18 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
考研复习计划
2015/01/19 职场文书
女方离婚起诉书
2015/05/18 职场文书
辞职离别感言
2015/08/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
创业计划书之废品回收
2019/09/26 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript