浅谈Vue路由快照实现思路及其问题


Posted in Javascript onJune 07, 2018

前言:无论构建SPA还是MPA,组件的状态是无法被保存下来的,这对于开发过程中问题的重现是比较麻烦的,因为总是会失去上下文环境,导致重现过程变得繁琐。于是想到了将Vue Component相关信息动态绑定在路由上。本文将给出其实现思路以及相关问题。

场景重现

在使用Vue开发完应用后,应用上线进入了测试阶段。测试人员测试出现问题后会对页面进行截图,并将页面地址和截图内容发送给开发人员进行bug的确定和修改。这是比较常规的方式,但这对开发人员是非常不友好的,因为开发人员拿到的URL地址时,即没有测试人员的本地数据,也需要通过繁琐的操作重新按照测试人员所填写的内容进行上下文环境的重现。为什么我们不能将这些数据保存下载,测试人员将URL发送给开发人员之后,开发者能很容易定位到上下文环境并进行错误的重现及调试。

为什么是URL

无论你的数据是保存在内存还是Store,亦或是存放在WebDB中,都会遇到一个问题:你永远都无法拿到测试人员的数据。那么唯一的方式就是通过URL来传输数据。因此,我们的构想是:当界面加载组件后,将组件的部分属性的变化公开到URL上,同时,组件在渲染时,读取URL后将值解析还原到组件上去。这样,即使不断的刷新页面,组件的状态也不会发生改变。

实现

于是,我们为这个功能编写了一个Vue插件,取名路由快照(router-snapshot),其实现代码如下:

// router-snapshot.js
// https://github.com/dankogai/js-base64
import { Base64 } from 'js-base64';

function beforeRouteEnterHandler (vm, {key, ext}) {
 // 获取路由绑定字段
 const routeBindKeys = vm.$options[ext] || [];
 // 获取路由绑定部分的加密字符串
 const routeParamsString = vm.$route.query[key];
 // 解密并转换为JSON
 let routeParamsJSON;
 try {
  routeParamsJSON = JSON.parse(Base64.decode(routeParamsString));
 }catch (e) {
  routeParamsJSON = {};
 }
 routeBindKeys.forEach(attr => {
  // 使用vue的是指方式,若浏览器没有缓存值,则获取组件默认值
  vm.$set(vm, attr, routeParamsJSON.hasOwnProperty(attr) ? routeParamsJSON[attr] : vm[attr]);
  // 追加属性反向监听,监听到的属性变化都会呈现在路由上
  vm.$watch(attr, (value) => {
   const query = vm.$route.query;
   let routeSnapshotValueJSON;
   try {
    routeSnapshotValueJSON = JSON.parse(Base64.decode(query[key]));
   }catch (e) {
    routeSnapshotValueJSON = {};
   }
   routeSnapshotValueJSON[attr] = value;
   const extendQuery = {};
   extendQuery[key] = Base64.encodeURI(JSON.stringify(routeSnapshotValueJSON));
   vm.$router.push({
    query: { 
     ...query,
     ...extendQuery
    }
   })
  }, {
   deep: true
  });
 })
}

export default {
 install (Vue, {key = '_', ext = 'routeShot'} = {}) {
  Vue.mixin({
   // beforeRouteEnter (to, from, next) {
   //  console.log('beforeRouteEnter', to, from)
   //  next(beforeRouteEnterHandler)
   // }
   created () {
    beforeRouteEnterHandler(this, {key, ext});
   }
  });
 }
}

代码逻辑大致如下:

  1. 代码45行,注册该组件时,我们需要指定保存在URL query部分的键名,默认为_;同时指定绑定在组件上的拓展属性名,默认为routeShot;
  2. 代码21行,根据组件拓展属性,对这些拓展属性实施监听,将属性值的变化同步到路由中;
  3. 代码19行,在组件created阶段,获取路由参数并解析成组件属性,并将属性值同步到组件中;
  4. 代码13、25、31行对路由上的参数进行Base64的加密和解密;

组件的代码仅仅需要追加routeShot的配置即可:

<template>
  <!-- 使用的iview库的Switch组件 -->
  <Switch v-mode="switchValue"></Switch>
</template>
<script>
 export default {
  // 配置routeShot,指定该组件的switchValue属性映射到URL中
  routeShot: ['switchValue'],
  data () {
   return {
    switchValue: false
   }
  }
 }
</script>

经过这样,无论你怎么刷新页面,被快照的属性都不会发生改变。另外,除了data属性,prop、computed属性也是可以绑定到URL上的。

什么时候用最适合?

目前来说,应用场景中最多的还是非安全性表单以及不需要持久化的数据。举几个例子:

  1. 表格中筛选项有很多的情况下,用户进行了大量的选择和填写操作,结果因为网络原因导致请求失败。待网络恢复后,用户重新刷新页面,先前的操作必须重新执行;一般情况中,用户不会随意更改浏览器的URL,在这种条件下,用户的刷新不影响上下文的环境,能给用户带来一定便利;
  2. 之前代码示例中,开关组件的值不交予服务端进行持久化,也是可以使用这种方式来保存操作的;

存在的问题

写完这个插件,面临了三个我认为比较重要的问题:

  1. 性能问题: 通过代码47-50行可以看出,早期设计是将插件应用在路由组件中的,但是在后期的测试和使用中,发现还有很多组件不是注册在路由中的,也就是父子组件,这样的组件无法被路由钩子拦截到,因此就将该函数混入到了所有组件的created函数中。当应用越来越大、组件越来越多的时候,这个性能未免有点令人担忧;
  2. 持久性问题: 当URL的query部分越来越大的时候,超过了URL的长度限制,那么组件属性的持久性将会被中断。但我们并不能保证该长度不会超过,这随着应用的增长是无法预料的。在前端中,我们没有找到对应的库能进行定长加密解密,如果能找到,这个或将被解决;
  3. 安全性问题: 一直找不到比较安全的加密解密方式,而且我觉得这样做是会有安全隐患,但不知道究竟哪种场景会让这种安全性问题暴露的最大;

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

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
Javascript Math对象
Aug 13 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
Angular实现响应式表单
Aug 04 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
JavaScript中click和onclick本质区别与用法分析
Jun 07 #Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 #Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 #Javascript
You might like
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
python中的yield使用方法
2014/02/11 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
python和opencv实现抠图
2018/07/18 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
任课老师推荐信范文
2013/11/24 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
领导干部培训感言
2014/01/23 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
初中生操行评语大全
2014/04/24 职场文书
10的分与合教学反思
2014/04/30 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android