淺談Vue灰度發(fā)布新功能的使用
什么是灰度發(fā)布？百度百科的解釋如下。
灰度發(fā)布是指在黑與白之間，能夠平滑過渡的一種發(fā)布方式。AB test就是一種灰度發(fā)布方式，讓一部分用戶繼續(xù)用A，一部分用戶開始用B，如果用戶對B沒有什么反對意見，那么逐步擴大范圍，把所有用戶都遷移到B上面來?；叶劝l(fā)布可以保證整體系統(tǒng)的穩(wěn)定，在初始灰度的時候就可以發(fā)現(xiàn)、調整問題，以保證其影響度。
從上可以看出，灰度發(fā)布的主要作用有以下幾點：
- 降低直接全量發(fā)布帶來的影響，讓少部分用戶先使用新版本，如發(fā)現(xiàn)問題則及時做好修復，驗證無重大問題則全量發(fā)布新功能
- 通過新老版本的數(shù)據(jù)對比，決定新版本是否需要全量發(fā)布
概述
灰度發(fā)布的方式有很多，按端可以區(qū)分服務端，客戶端，Web前端都可以做，沒有最好，只有更適合自己的業(yè)務場景。
如上可以看到常見的幾種灰度發(fā)布的方式，都有各自的優(yōu)缺點，由于我們公司有完善的大數(shù)據(jù)AB test方案，所以前端只需關注接口返回的字段標識，來做具體的頁面加載邏輯，今天重點講述在前端中使用Vue框架中如何做灰度發(fā)布。在Vue中主要可以分為以下兩種情況：
組件級別：
- 組件級別動態(tài)控制只需后端回傳對應方案標識即可。
頁面級別：
- 前端頁面訪問地址不變，同后端人員約定好AB test 標記字段，前端根據(jù)字段返回不同的內容加載對應的頁面。
- 新舊功能區(qū)分兩個頁面地址，跳轉頁面地址由后端控制，此方案前端不需要太多改動，此文就不多說明。
先來看看日常處理的方式，一個頁面可能會存在多個地方判斷AB test 邏輯，或者是更多的AB test同時進行，這樣的頁面代碼邏輯復雜度相對比較高，也不夠整潔易懂，當有新的AB test加入或者有AB test需要決策的時候，修改代碼的成本較高，降低了代碼維護的效率。
<template>
...
<test-a v-if="testA" />
<test-b v-else-if="testB" />
...
<div v-if="testA">
...
</div>
<div v-else-if="testB">
...
</div>
...
</template>
<script>
...
if (testA) {
...
} else if (testB) {
...
}
</script>接下來就開始我們今天文章的正題，看看有哪些方式可以解決以上的問題。
組件級別
如只是簡單的兩個小組件功能的灰度則可以直接用 v-if 處理
<testA v-if="testA" /> <testB v-else />
如有多個功能同時測試，可以通過 Vue 的元素加一個特殊的 isattribute 來實現(xiàn)，currentTabComponent 可基于接口獲取或其他前端計算得出。
<component :is="currentTabComponent"></component>
頁面級別
方案一 新增入口頁面分發(fā)
新增入口頁面，將新舊版本頁面升級為組件的方式引入，入口頁面增加接口查詢，通過 v-if 或通過 Vue 的<component> 元素加一個特殊的 is 屬性來加載頁面組件。如下是通過接口查詢代碼示例，通過接口前置查詢會帶來一定的界面延遲加載，取決于接口的響應速度，我們也可以通過在URL增加參數(shù)獲取，這時的URL由后端拼接好參數(shù)再返回，這樣就可以避免一次接口查詢。
<template>
<component :is="testId"></component>
</template>
<script>
import IndexA from './index-a'
import IndexB from './index-b'
import {
getTestID
} from '@/api/getTestID'
export default {
name: 'index',
components: {
'index-a': IndexA,
'index-b': IndexB
},
data() {
return {
testId: ''
}
},
created() {
this.getTestID()
},
methods: {
async getTestID() {
const { testId } = await getTestID({
xxx: xxx
})
this.testId = testId
}
}
}
</script>這里直接這樣加載頁面級組件會導致此文件體積加大，可以將頁面組件的加載方式改為異步組件，提升頁面加載速度。
components: {
'index-a': () => import(/* webpackChunkName: "index-a" */ './index-a'),
'index-b': () => import(/* webpackChunkName: "index-b" */ './index-b')
}方案二 高階組件方案
在路由配置中從接口獲取灰度標識數(shù)據(jù)，進行路由分發(fā)。如果不想額外增加接口查詢的開銷，也可以將標識數(shù)據(jù)從URL參數(shù)返回，此方式需要提前拼接好參數(shù)。
高階組件的好處是所有需要灰度的加載邏輯都在路由配置文件中，統(tǒng)一維護，組件也可復用，不需要每個需要灰度的頁面都增加一個入口文件。
組件代碼
<template>
<component :is="com" />
</template>
<script>
export default {
name: 'DynamicLoadComponent',
props: {
renderComponent: {
type: Promise
}
},
data() {
return {
com: () => this.renderComponent
}
}
};
</script>router.js 配置
{
path: 'originPath',
component: () => import('@/views/components/DynamicLoadComponent'),
name: 'originPath',
props: (route) => ({
renderComponent: new Promise((resolve, reject) => {
// 根據(jù) route 拼接參數(shù)獲取加載頁面
if (route.query.testA) {
resolve(import('@/views/testA'));
} else {
resolve(import('@/views/testB'));
}
// OR 根據(jù)接口返回標識動態(tài)加載頁面
getAPIData()
.then((response) => {
if (response.testA) {
resolve(import('@/views/testA'));
} else {
resolve(import('@/views/testB'));
}
})
.catch(reject);
}),
})
}方案三 動態(tài)Router.js引入
如果是有大面積的頁面替換，可采用這種方式。例如，后端開發(fā)語言更換導致接口地址及返回的字段內容都發(fā)生變化，這樣會有一段時間的過渡使用，開發(fā)完一個頁面上線一個頁面，就可能會有5個頁面使用新的方案，5個頁面還是保留原始方案的情況。
改造router.js，將原始路由配置抽離到default.js中，再新建java.js將新方案路由配置寫入，基于前端計算或接口返回標識動態(tài)加載路由配置文件。
import Vue from 'vue'
import Router from 'vue-router'
import { isHitJavaAPI } from '@/config'
Vue.use(Router)
const router = new Router({
mode: 'history'
})
const computedRouterDirectory = (routeFile) => {
let routerConfig;
const requireRouter = require.context('.', false, /\.js$/);
routerConfig = requireRouter.keys().filter(file => file === `./${routeFile}.js`)[0];
if (routerConfig) {
routerConfig = requireRouter(routerConfig)
routerConfig.default && router.addRoutes(routerConfig.default);
}
}
if (isHitJavaAPI()) {
computedRouterDirectory('java')
} else {
computedRouterDirectory('default')
}isHitJavaAPI方法中是命中灰度的邏輯，如果這里是前端做灰度，可基于deviceID或UA等計算。如果這里是調用接口獲取方案則需改為同步調用。
總結
本文主要介紹了頁面級別的幾個灰度方案，每個方案的試用場景都有各自的優(yōu)缺點，如新增入口文件，主要是針對頁面變動較大且當前項目只會有一個在進行中的灰度測試；高階組件適用于當前項目有多個進行中的灰度測試，則可復用組件；動態(tài)加載路由配置文件主要針對于當前項目有大規(guī)模的頁面UI或邏輯更換灰度測試；通過以上幾種方案都可極大的提升代碼的可維護性以及解耦灰度邏輯和業(yè)務代碼邏輯，當灰度測試沒有問題需全量上線時，我們只需修改入口邏輯即可，無需在業(yè)務代碼中去逐個修改灰度邏輯。
除開本文所介紹的幾種方式，也還有其他的加載方式，如路由鉤子函數(shù)攔截后做動態(tài)跳轉，或者請求到后端，后端做重定向處理等。每個方式都有各自的優(yōu)缺點，就看是不是你當前場景最合適的方案。如果你有其他的方案，歡迎留言和我們交流～
參考
Vue Router根據(jù)后臺數(shù)據(jù)加載不同的組件：https://www.cnblogs.com/zhea55/p/15115555.html
components-dynamic-async：https://cn.vuejs.org/v2/guide/components-dynamic-async.html
到此這篇關于淺談Vue灰度發(fā)布新功能的使用的文章就介紹到這了,更多相關Vue灰度發(fā)布內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- vue.js評論發(fā)布信息可插入QQ表情功能
- Vue cli3 庫模式搭建組件庫并發(fā)布到 npm的流程
- 關于vue.js發(fā)布后路徑引用的問題解決
- Vue2.0如何發(fā)布項目實戰(zhàn)
- 解決vue 打包發(fā)布去#和頁面空白的問題
- 用vue封裝插件并發(fā)布到npm的方法步驟
- vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用）
- 詳細講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
- vue2.0+ 從插件開發(fā)到npm發(fā)布的示例代碼
- Vue插件從封裝到發(fā)布的完整步驟記錄
相關文章
這篇文章主要為大家詳細介紹了vue使用axios跨域請求數(shù)據(jù)的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要為大家詳細介紹了vue+elemet實現(xiàn)表格手動合并行列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補充介紹了vue通過jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue常用的全選/反選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
Vue-axios-post數(shù)據(jù)后端接不到問題解決
這篇文章主要介紹了Vue-axios-post數(shù)據(jù)后端接不到問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
利用vue對比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關于利用vue對比兩組數(shù)據(jù)差異的可視化組件的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
這篇文章主要為大家介紹了vue3中element的Form表單用法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了使用Bootrap和Vue實現(xiàn)仿百度搜索功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Vue.js標簽頁組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一2019-10-10