详解基于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 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Node.js操作redis实现添加查询功能
May 25 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
js实现简单的秒表
Jan 16 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
JS实现手风琴特效
Nov 08 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
初级的用php写的采集程序
2007/03/16 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
python的id()函数介绍
2013/02/10 Python
python实现爬虫下载漫画示例
2014/02/16 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python time.strptime格式化实例详解
2021/02/03 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
师范大学毕业自我鉴定
2013/11/21 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
旅游安全责任协议书
2016/03/22 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang