浅谈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不同页面传值的改进版
Sep 30 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
javascript 写类方式之二
2009/07/05 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
python optparse模块使用实例
2015/04/09 Python
django缓存配置的几种方法详解
2018/07/16 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
基于PyTorch中view的用法说明
2021/03/03 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
物理研修随笔感言
2014/02/14 职场文书
身边的榜样活动方案
2014/08/20 职场文书
施工安全责任协议书
2016/03/23 职场文书
2019同学聚会主持词
2019/05/06 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android