详解基于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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
vue实现计算器功能
Feb 22 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php开启openssl的方法
2014/05/15 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue实现搜索功能
2019/05/28 Javascript
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python制作填词游戏步骤详解
2019/05/05 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
会计辞职信范文
2014/01/15 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
党员承诺书格式范文
2015/04/28 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang