詳解基于vue的移動(dòng)webapp頁面緩存解決方案

現(xiàn)在移動(dòng)web app越來越熱門了，許多公司開始嘗試使用angular、react、vue等MVVM框架來開發(fā)單頁架構(gòu)的web app。但在開發(fā)web app時(shí)，如果希望頁面的導(dǎo)航體驗(yàn)也接近原生應(yīng)用，那一般都會(huì)遇到這兩個(gè)問題：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營銷軟件、網(wǎng)站建設(shè)、下陸網(wǎng)站維護(hù)、網(wǎng)站推廣。

識(shí)別前進(jìn)后退行為
后退時(shí)恢復(fù)之前的頁面

筆者開發(fā)了一個(gè)基于vue與vue-router的導(dǎo)航庫vue-navigation，來幫助開發(fā)者來解決這些問題，下面是問題的解決思路。

識(shí)別前進(jìn)后退

先說第一個(gè)問題。和原生app不一樣，瀏覽器中主要有這幾個(gè)限制：

沒有提供前進(jìn)后退的事件
不允許開發(fā)者讀取瀏覽記錄
用戶可以手動(dòng)輸入地址，或使用瀏覽器提供的前進(jìn)后退來改變url

解決方案是自己維護(hù)一份瀏覽記錄，每次url改變時(shí)，通過與記錄的瀏覽記錄作對(duì)比，從而判斷出前進(jìn)后退行為：

url存在于瀏覽記錄中即為后退
url不存在于瀏覽記錄中即為前進(jìn)
url在瀏覽記錄的末端即為刷新

另外，應(yīng)用的路由路徑中可能允許相同的路由出現(xiàn)多次（例如A->B->A），所以給每個(gè)路由添加一個(gè)key值來區(qū)分相同路由的不同實(shí)例。

這個(gè)瀏覽記錄需要存儲(chǔ)在sessionStorage中，這樣用戶刷新后瀏覽記錄也可以恢復(fù)。

后退時(shí)恢復(fù)之前的頁面

識(shí)別出后退行為后，下一步就是像原生一樣恢復(fù)之前的頁面了。

一種方案是頁面繼續(xù)存儲(chǔ)在DOM中，添加樣式display: none來告訴瀏覽器不渲染該元素，但是緩存的頁面多了DOM就會(huì)變得很大，會(huì)影響頁面的性能，本文不討論這個(gè)方案。

另一種方案是將數(shù)據(jù)緩存到內(nèi)存中，開發(fā)者需要將頁面的數(shù)據(jù)存儲(chǔ)起來，當(dāng)返回到該頁面時(shí)，再根據(jù)數(shù)據(jù)將頁面恢復(fù)。但是這樣每個(gè)頁面存儲(chǔ)的數(shù)據(jù)不通，一般需要進(jìn)行額外的編碼，如果有一種更底層的方案能解決這個(gè)問題，并且對(duì)開發(fā)者是透明的，就最好了，所以嘗試并開發(fā)了vue-navigation。

在vue-navigation 0.x版本的時(shí)候，借助了vue的keep-alive來緩存頁面，但是keep-alive是根據(jù)組件的name或tag來決定緩存的，所以帶來了很多限制。

通過拜讀keep-alive的源碼，了解到它的緩存機(jī)制后，就自己實(shí)現(xiàn)了一個(gè)管理緩存的組件，來靈活地緩存子組件，實(shí)現(xiàn)思路如下：

每次render時(shí)，先取到子組件的vnode（vue的虛擬dom）
計(jì)算出vnode的key，把key值賦給vnode避免vue-router復(fù)用組件實(shí)例
根據(jù)key值判斷該節(jié)點(diǎn)是否已緩存
1. 已緩存：將緩存的實(shí)例賦給componentInstance，這樣vue就會(huì)根據(jù)這個(gè)實(shí)例來恢復(fù)組件
2. 未緩存：將vnode存儲(chǔ)到內(nèi)存中，下次返回到該頁面時(shí)可以從內(nèi)存中恢復(fù)

另外還需要添加一個(gè)清除緩存的邏輯，當(dāng)自己維護(hù)的瀏覽記錄變化時(shí)，根據(jù)瀏覽記錄清除不需要的緩存（例如當(dāng)前的路由是：A->B->C，用戶從C直接返回到了A，那么B和C都需要從緩存中刪除）。

最后

雖然是基于vue來開發(fā)的，但是思路是不變的，使用其他框架也可以做到同樣的事情。

還是安利一下vue和vue-navigation。使用插件后，再將router-view放在navigation下就有緩存功能了。

main.js

import Vue from 'vue'
import router from './router' // vue-router 實(shí)例
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
// 啟動(dòng)你的應(yīng)用...

App.vue

<template>
 <navigation>
  <router-view></router-view>
 </navigation>
</template>

最后歡迎大家討論或提供更好的解決方案。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前名稱：詳解基于vue的移動(dòng)webapp頁面緩存解決方案
文章轉(zhuǎn)載：http://www.muchs.cn/article44/phddhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、企業(yè)建站、做網(wǎng)站、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容