详解基于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 相关文章推荐
js 加载并解析XML字符串的代码
Dec 13 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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 加密解密内部算法
2010/04/22 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
php判断目录存在的简单方法
2019/09/26 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
犀利的js 函数集合
2009/06/11 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
浅谈Fetch 数据交互方式
2018/12/20 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python文件和文件夹复制函数
2020/02/07 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
自荐信格式简述
2014/01/25 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
教师评语大全
2014/04/28 职场文书
贷款委托书
2014/08/01 职场文书
花木兰观后感
2015/06/10 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
Go语言编译原理之源码调试
2022/08/05 Golang
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server