欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談Vue路由快照實(shí)現(xiàn)思路及其問題

 更新時(shí)間:2018年06月07日 16:08:20   作者:loong  
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言:無論構(gòu)建SPA還是MPA,組件的狀態(tài)是無法被保存下來的,這對(duì)于開發(fā)過程中問題的重現(xiàn)是比較麻煩的,因?yàn)榭偸菚?huì)失去上下文環(huán)境,導(dǎo)致重現(xiàn)過程變得繁瑣。于是想到了將Vue Component相關(guān)信息動(dòng)態(tài)綁定在路由上。本文將給出其實(shí)現(xiàn)思路以及相關(guān)問題。

場(chǎng)景重現(xiàn)

在使用Vue開發(fā)完應(yīng)用后,應(yīng)用上線進(jìn)入了測(cè)試階段。測(cè)試人員測(cè)試出現(xiàn)問題后會(huì)對(duì)頁(yè)面進(jìn)行截圖,并將頁(yè)面地址和截圖內(nèi)容發(fā)送給開發(fā)人員進(jìn)行bug的確定和修改。這是比較常規(guī)的方式,但這對(duì)開發(fā)人員是非常不友好的,因?yàn)殚_發(fā)人員拿到的URL地址時(shí),即沒有測(cè)試人員的本地?cái)?shù)據(jù),也需要通過繁瑣的操作重新按照測(cè)試人員所填寫的內(nèi)容進(jìn)行上下文環(huán)境的重現(xiàn)。為什么我們不能將這些數(shù)據(jù)保存下載,測(cè)試人員將URL發(fā)送給開發(fā)人員之后,開發(fā)者能很容易定位到上下文環(huán)境并進(jìn)行錯(cuò)誤的重現(xiàn)及調(diào)試。

為什么是URL

無論你的數(shù)據(jù)是保存在內(nèi)存還是Store,亦或是存放在WebDB中,都會(huì)遇到一個(gè)問題:你永遠(yuǎn)都無法拿到測(cè)試人員的數(shù)據(jù)。那么唯一的方式就是通過URL來傳輸數(shù)據(jù)。因此,我們的構(gòu)想是:當(dāng)界面加載組件后,將組件的部分屬性的變化公開到URL上,同時(shí),組件在渲染時(shí),讀取URL后將值解析還原到組件上去。這樣,即使不斷的刷新頁(yè)面,組件的狀態(tài)也不會(huì)發(fā)生改變。

實(shí)現(xiàn)

于是,我們?yōu)檫@個(gè)功能編寫了一個(gè)Vue插件,取名路由快照(router-snapshot),其實(shí)現(xiàn)代碼如下:

// router-snapshot.js
// https://github.com/dankogai/js-base64
import { Base64 } from 'js-base64';

function beforeRouteEnterHandler (vm, {key, ext}) {
 // 獲取路由綁定字段
 const routeBindKeys = vm.$options[ext] || [];
 // 獲取路由綁定部分的加密字符串
 const routeParamsString = vm.$route.query[key];
 // 解密并轉(zhuǎn)換為JSON
 let routeParamsJSON;
 try {
  routeParamsJSON = JSON.parse(Base64.decode(routeParamsString));
 }catch (e) {
  routeParamsJSON = {};
 }
 routeBindKeys.forEach(attr => {
  // 使用vue的是指方式,若瀏覽器沒有緩存值,則獲取組件默認(rèn)值
  vm.$set(vm, attr, routeParamsJSON.hasOwnProperty(attr) ? routeParamsJSON[attr] : vm[attr]);
  // 追加屬性反向監(jiān)聽,監(jiān)聽到的屬性變化都會(huì)呈現(xiàn)在路由上
  vm.$watch(attr, (value) => {
   const query = vm.$route.query;
   let routeSnapshotValueJSON;
   try {
    routeSnapshotValueJSON = JSON.parse(Base64.decode(query[key]));
   }catch (e) {
    routeSnapshotValueJSON = {};
   }
   routeSnapshotValueJSON[attr] = value;
   const extendQuery = {};
   extendQuery[key] = Base64.encodeURI(JSON.stringify(routeSnapshotValueJSON));
   vm.$router.push({
    query: { 
     ...query,
     ...extendQuery
    }
   })
  }, {
   deep: true
  });
 })
}

export default {
 install (Vue, {key = '_', ext = 'routeShot'} = {}) {
  Vue.mixin({
   // beforeRouteEnter (to, from, next) {
   //  console.log('beforeRouteEnter', to, from)
   //  next(beforeRouteEnterHandler)
   // }
   created () {
    beforeRouteEnterHandler(this, {key, ext});
   }
  });
 }
}

代碼邏輯大致如下:

  1. 代碼45行,注冊(cè)該組件時(shí),我們需要指定保存在URL query部分的鍵名,默認(rèn)為_;同時(shí)指定綁定在組件上的拓展屬性名,默認(rèn)為routeShot;
  2. 代碼21行,根據(jù)組件拓展屬性,對(duì)這些拓展屬性實(shí)施監(jiān)聽,將屬性值的變化同步到路由中;
  3. 代碼19行,在組件created階段,獲取路由參數(shù)并解析成組件屬性,并將屬性值同步到組件中;
  4. 代碼13、25、31行對(duì)路由上的參數(shù)進(jìn)行Base64的加密和解密;

組件的代碼僅僅需要追加routeShot的配置即可:

<template>
  <!-- 使用的iview庫(kù)的Switch組件 -->
  <Switch v-mode="switchValue"></Switch>
</template>
<script>
 export default {
  // 配置routeShot,指定該組件的switchValue屬性映射到URL中
  routeShot: ['switchValue'],
  data () {
   return {
    switchValue: false
   }
  }
 }
</script>

經(jīng)過這樣,無論你怎么刷新頁(yè)面,被快照的屬性都不會(huì)發(fā)生改變。另外,除了data屬性,prop、computed屬性也是可以綁定到URL上的。

什么時(shí)候用最適合?

目前來說,應(yīng)用場(chǎng)景中最多的還是非安全性表單以及不需要持久化的數(shù)據(jù)。舉幾個(gè)例子:

  1. 表格中篩選項(xiàng)有很多的情況下,用戶進(jìn)行了大量的選擇和填寫操作,結(jié)果因?yàn)榫W(wǎng)絡(luò)原因?qū)е抡?qǐng)求失敗。待網(wǎng)絡(luò)恢復(fù)后,用戶重新刷新頁(yè)面,先前的操作必須重新執(zhí)行;一般情況中,用戶不會(huì)隨意更改瀏覽器的URL,在這種條件下,用戶的刷新不影響上下文的環(huán)境,能給用戶帶來一定便利;
  2. 之前代碼示例中,開關(guān)組件的值不交予服務(wù)端進(jìn)行持久化,也是可以使用這種方式來保存操作的;

存在的問題

寫完這個(gè)插件,面臨了三個(gè)我認(rèn)為比較重要的問題:

  1. 性能問題: 通過代碼47-50行可以看出,早期設(shè)計(jì)是將插件應(yīng)用在路由組件中的,但是在后期的測(cè)試和使用中,發(fā)現(xiàn)還有很多組件不是注冊(cè)在路由中的,也就是父子組件,這樣的組件無法被路由鉤子攔截到,因此就將該函數(shù)混入到了所有組件的created函數(shù)中。當(dāng)應(yīng)用越來越大、組件越來越多的時(shí)候,這個(gè)性能未免有點(diǎn)令人擔(dān)憂;
  2. 持久性問題: 當(dāng)URL的query部分越來越大的時(shí)候,超過了URL的長(zhǎng)度限制,那么組件屬性的持久性將會(huì)被中斷。但我們并不能保證該長(zhǎng)度不會(huì)超過,這隨著應(yīng)用的增長(zhǎng)是無法預(yù)料的。在前端中,我們沒有找到對(duì)應(yīng)的庫(kù)能進(jìn)行定長(zhǎng)加密解密,如果能找到,這個(gè)或?qū)⒈唤鉀Q;
  3. 安全性問題: 一直找不到比較安全的加密解密方式,而且我覺得這樣做是會(huì)有安全隱患,但不知道究竟哪種場(chǎng)景會(huì)讓這種安全性問題暴露的最大;

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能

    vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能

    這篇文章主要介紹了vue+SSM實(shí)現(xiàn)驗(yàn)證碼功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-12-12
  • vue 本地環(huán)境跨域請(qǐng)求proxyTable的方法

    vue 本地環(huán)境跨域請(qǐng)求proxyTable的方法

    今天小編就為大家分享一篇vue 本地環(huán)境跨域請(qǐng)求proxyTable的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式

    關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式

    這篇文章主要介紹了關(guān)于element-ui表單中限制輸入純數(shù)字的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue3 provide與inject的使用小技巧分享

    vue3 provide與inject的使用小技巧分享

    這篇文章主要介紹了vue3 provide與inject的使用小技巧,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue自定義翻頁(yè)組件的方法

    vue自定義翻頁(yè)組件的方法

    這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁(yè)組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • Vue組件間數(shù)據(jù)傳遞的方式(3種)

    Vue組件間數(shù)據(jù)傳遞的方式(3種)

    這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)

    Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序)

    這篇文章主要介紹了Vue?先初始化父組件再初始化子組件的方法(自定義父子組件mounted執(zhí)行順序),本篇內(nèi)容內(nèi)容主要講述了,在使用?Konva?進(jìn)行開發(fā)過程中遇到的一些問題,需要的朋友可以參考下
    2024-07-07
  • vue中使用@change的方法

    vue中使用@change的方法

    @change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當(dāng)前的參數(shù)呢?本文給大家詳細(xì)講解,感興趣的朋友一起看看吧
    2023-11-11
  • vue 取出v-for循環(huán)中的index值實(shí)例

    vue 取出v-for循環(huán)中的index值實(shí)例

    今天小編就為大家分享一篇vue 取出v-for循環(huán)中的index值實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 如何獲取this.$store.dispatch的返回值

    如何獲取this.$store.dispatch的返回值

    這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評(píng)論