详解基于vue的移动web app页面缓存解决方案


Posted in Javascript onAugust 03, 2017

现在移动web app越来越热门了,许多公司开始尝试使用angular、react、vue等MVVM框架来开发单页架构的web app。但在开发web app时,如果希望页面的导航体验也接近原生应用,那一般都会遇到这两个问题:

  • 识别前进后退行为
  • 后退时恢复之前的页面

笔者开发了一个基于vue与vue-router的导航库vue-navigation,来帮助开发者来解决这些问题,下面是问题的解决思路。

识别前进后退

先说第一个问题。和原生app不一样,浏览器中主要有这几个限制:

  • 没有提供前进后退的事件
  • 不允许开发者读取浏览记录
  • 用户可以手动输入地址,或使用浏览器提供的前进后退来改变url

解决方案是自己维护一份浏览记录,每次url改变时,通过与记录的浏览记录作对比,从而判断出前进后退行为:

  • url存在于浏览记录中即为后退
  • url不存在于浏览记录中即为前进
  • url在浏览记录的末端即为刷新

另外,应用的路由路径中可能允许相同的路由出现多次(例如A->B->A),所以给每个路由添加一个key值来区分相同路由的不同实例。

这个浏览记录需要存储在sessionStorage中,这样用户刷新后浏览记录也可以恢复。

后退时恢复之前的页面

识别出后退行为后,下一步就是像原生一样恢复之前的页面了。

一种方案是页面继续存储在DOM中,添加样式display: none来告诉浏览器不渲染该元素,但是缓存的页面多了DOM就会变得很大,会影响页面的性能,本文不讨论这个方案。

另一种方案是将数据缓存到内存中,开发者需要将页面的数据存储起来,当返回到该页面时,再根据数据将页面恢复。但是这样每个页面存储的数据不通,一般需要进行额外的编码,如果有一种更底层的方案能解决这个问题,并且对开发者是透明的,就最好了,所以尝试并开发了vue-navigation。

在vue-navigation 0.x版本的时候,借助了vue的keep-alive来缓存页面,但是keep-alive是根据组件的name或tag来决定缓存的,所以带来了很多限制。

通过拜读keep-alive的源码,了解到它的缓存机制后,就自己实现了一个管理缓存的组件,来灵活地缓存子组件,实现思路如下:

  1. 每次render时,先取到子组件的vnode(vue的虚拟dom)
  2. 计算出vnode的key,把key值赋给vnode避免vue-router复用组件实例
  3. 根据key值判断该节点是否已缓存
    1. 已缓存:将缓存的实例赋给componentInstance,这样vue就会根据这个实例来恢复组件
    2. 未缓存:将vnode存储到内存中,下次返回到该页面时可以从内存中恢复

另外还需要添加一个清除缓存的逻辑,当自己维护的浏览记录变化时,根据浏览记录清除不需要的缓存(例如当前的路由是:A->B->C,用户从C直接返回到了A,那么B和C都需要从缓存中删除)。

最后

虽然是基于vue来开发的,但是思路是不变的,使用其他框架也可以做到同样的事情。

还是安利一下vue和vue-navigation。使用插件后,再将router-view放在navigation下就有缓存功能了。

main.js

import Vue from 'vue'
import router from './router' // vue-router 实例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 启动你的应用...

App.vue

<template>
 <navigation>
  <router-view></router-view>
 </navigation>
</template>

最后欢迎大家讨论或提供更好的解决方案。

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

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
javascript常用的正则表达式实例
May 15 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
TypeScript 内置高级类型编程示例
Sep 23 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 #Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 #Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 #Javascript
webpack开发跨域问题解决办法
Aug 03 #Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
You might like
php中一个完整表单处理实现代码
2011/11/10 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Python使用filetype精确判断文件类型
2017/07/02 Python
python实现八大排序算法(1)
2017/09/14 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
成人教育自我鉴定
2013/11/01 职场文书
写好自荐信要注意的问题
2013/11/10 职场文书
学生励志演讲稿
2014/01/06 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript