DDR爱好者之家

详解基于vue的移动web app页面缓存解决方案
站长资源 2024/11/27 佚名
78 1538
DDR爱好者之家 Design By 杰米

现在移动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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米