详解基于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的键盘控制事件说明
Apr 15 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 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学习笔记之二 php入门知识
2011/01/12 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
Laravel实现表单提交
2017/05/07 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
Javascript 写的简单进度条控件
2008/01/22 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
农村党员一句话承诺
2014/05/30 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2015年底工作总结范文
2015/05/15 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书