建站
咨詢
售后
建站咨詢
新聞中心
我們有時(shí)候會(huì)遇到一個(gè)業(yè)務(wù)頁(yè)面存在很多個(gè)狀態(tài)，甚至子狀態(tài)，比如訂單詳情就是其中的典型，涉及從訂單創(chuàng)建到訂單結(jié)束，以及售后等流程。維護(hù)起來(lái)每個(gè)狀態(tài)對(duì)應(yīng)一份數(shù)據(jù)，雖然我們 QA 提供了數(shù)據(jù)構(gòu)造平臺(tái)，但構(gòu)造一份對(duì)應(yīng)狀態(tài)的數(shù)據(jù)還是需要花費(fèi)不少時(shí)間，而且串行流程一旦出錯(cuò)的話只能重新來(lái)一遍。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、輝南網(wǎng)絡(luò)推廣、微信小程序、輝南網(wǎng)絡(luò)營(yíng)銷(xiāo)、輝南企業(yè)策劃、輝南品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供輝南建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com
后期維護(hù)階段也不容易構(gòu)造對(duì)應(yīng)狀態(tài)的數(shù)據(jù)，導(dǎo)致排查頁(yè)面問(wèn)題比較耗時(shí)。
另外一個(gè)問(wèn)題就是從頭熟悉業(yè)務(wù)的話成本比較高，如果有一個(gè)直觀的頁(yè)面能夠看到頁(yè)面樣式會(huì)好很多。
以上就是設(shè)計(jì)一個(gè)多狀態(tài) mock 工具初衷，讓開(kāi)發(fā)者在頁(yè)面中直接選擇對(duì)應(yīng)狀態(tài)，就可以切換到對(duì)應(yīng)頁(yè)面。
技術(shù)選型
目前轉(zhuǎn)轉(zhuǎn) app 測(cè)試包，webview 頁(yè)面氣泡浮層已經(jīng)有兩個(gè)了——客戶端工具和 eruda，再多就亂套了，所以最好集成在現(xiàn)有的工具基礎(chǔ)上。客戶端部分功能我們接觸不到也不了解，在現(xiàn)有條件下只有 eruda 可用。
Eruda 是一個(gè)很強(qiáng)大的前端頁(yè)面調(diào)試工具庫(kù)，我們客戶端 webview 也內(nèi)置了，在測(cè)試包中可以很方便的借助 eruda 調(diào)試頁(yè)面，觀察日志。同時(shí) eruda 也支持插件，通過(guò)插件來(lái)擴(kuò)展 eruda 的功能。我們的工具就基于 eruda 插件來(lái)實(shí)現(xiàn)。
實(shí)現(xiàn)效果預(yù)覽：
插件預(yù)覽圖
總體流程如下：
插件流程
整個(gè)流程大概三個(gè)部分組成
- 業(yè)務(wù)邏輯改造
- Eruda 插件
- Mock 數(shù)據(jù)整理
業(yè)務(wù)邏輯改造
首先要實(shí)現(xiàn)這樣一個(gè)方案核心依賴于業(yè)務(wù)使用的請(qǐng)求庫(kù)，以及是否能夠?qū)φ?qǐng)求庫(kù)進(jìn)行修改。
我們業(yè)務(wù)使用的基于 axios 的請(qǐng)求庫(kù)，其暴露了實(shí)際發(fā)送請(qǐng)求的 adapter 邏輯，我們可以基于 adapter 來(lái)實(shí)現(xiàn)接口方法的攔截。
axios adapter
借助 axios-mock-adapter[1]，可以很方便的實(shí)現(xiàn)我們的需求。
import { axiosInstance } from '@zz/fetch';
import MockAdapter from 'axios-mock-adapter';
export const mock = new MockAdapter(axiosInstance)
try {
// 借助 localstorage 實(shí)現(xiàn) eruda 插件和 axios-mock-adapter 通信
const mockReqConf = JSON.parse(localStorage.getItem('_mock_req'))
if (mockReqConf && mockReqConf.mockId) {
mock.onGet(api.getOrderDetail).reply(config {
// console.log('mock api', api.getOrderDetail)
return axiosInstance.get('https://mockrepository.zhuanzhuan.com/orderdetail?mockId=' + mockReqConf.mockId)
})
}
mock.onAny()
.passThrough()
const isProduction = process.env.NODE_ENV === 'production'
if (isProduction || (mockReqConf && mockReqConf.mockId === '')) {
// sessionStorage 實(shí)現(xiàn)開(kāi)關(guān)，如果沒(méi)有此配置，就重置設(shè)置的 mock 攔截
if (!sessionStorage.getItem('mock-adapter')) {
mock.restore()
}
}
} catch (error) {
console.log('mock adapter config error', error)
}
Eruda 插件
插件的目的是實(shí)現(xiàn)兩個(gè)功能，一個(gè)是總開(kāi)關(guān)，另一個(gè)是 mock 數(shù)據(jù)的展示和切換。
總開(kāi)關(guān)借助 sessionStorage，webview 關(guān)閉 sessionStorage 數(shù)據(jù)清除，這樣避免了一進(jìn)入頁(yè)面就是 mock 數(shù)據(jù)，防止忘記關(guān)閉以及頻繁操作，需要的時(shí)候才打開(kāi)。
Mock 數(shù)據(jù)的展示配置在一個(gè)配置文件中，公司有統(tǒng)一的配置中心，基于攜程 Apollo 實(shí)現(xiàn)。這個(gè)文件的作用是映射對(duì)應(yīng)的狀態(tài)和 mock 數(shù)據(jù)來(lái)源，來(lái)源是統(tǒng)一的，所以只用參數(shù)區(qū)分即可。
示例如下：
[
{
"id": "/order/detail",
"list": [
{
"title": "正向流程",
"list": [
{
"title": "下單待發(fā)貨",
"id": "1-0-1"
},
{
"title": "寄賣(mài)下單",
"id": "1-1-0"
},
{
"title": "發(fā)貨運(yùn)輸中",
"id": "1-2-0"
},
{
"title": "平臺(tái)質(zhì)檢",
"id": "1-3-0"
}
]
},
{
"title": "逆向流程",
"list": [
{
"title": "申請(qǐng)退回-退回中",
"id": "2-3-2"
}
]
}
]
}
]
??id?? 用于標(biāo)識(shí)當(dāng)前頁(yè)面鏈接，是否有配置 mock 數(shù)據(jù)，所以也支持配置多個(gè)頁(yè)面。
Eruda 插件的實(shí)現(xiàn)參考 eruda 官方文檔。
- ?Eruda 如何寫(xiě)插件[2] https://github.com/liriliri/eruda/blob/master/doc/PLUGIN.md
- Eruda 工具庫(kù)[3] https://licia.liriliri.io/docs_cn.html
Eruda 插件寫(xiě)法類(lèi)比較像一個(gè)小的模板庫(kù)，eruda 提供了插件模板，綁定事件方式類(lèi)似于 jQuery 語(yǔ)法，eruda 提供的 licia 工具庫(kù)均有對(duì)應(yīng)方法，參考即可。
Eruda 插件示例代碼：
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory();
} else {
root.erudaPlugin = factory();
}
})(this, function() {
return function(eruda) {
var Tool = eruda.Tool,
util = eruda.util;
var Plugin = Tool.extend({
name: 'plugin',
init: function($el) {
this.callSuper(Tool, 'init', arguments);
this._style = util.evalCss(
[
'.eruda-dev-tools .eruda-tools .eruda-plugin {padding: 10px;}',
'.eruda-tip {padding: 10px; background: #fff; color: #263238;}'
].join('.eruda-dev-tools .eruda-tools .eruda-plugin ')
);
$el.html(
'Put whatever you want here:)'
);
},
show: function() {
this.callSuper(Tool, 'show', arguments);
},
hide: function() {
this.callSuper(Tool, 'hide', arguments);
},
destroy: function() {
this.callSuper(Tool, 'destroy', arguments);
util.evalCss.remove(this._style);
}
});
return new Plugin();
};
});
Mock 數(shù)據(jù)整理
這一部分其實(shí)是比較耗費(fèi)體力的工作。需要整理每一個(gè)狀態(tài)的數(shù)據(jù)，存儲(chǔ)起來(lái)。前面提到公司提供的一個(gè)接口平臺(tái)，基于去哪兒 YAPI 搭建，其提供了每個(gè)接口 mock 能力，我們添加 mock 數(shù)據(jù)即可。前面配置文件中每一個(gè)狀態(tài)下的 id 其實(shí)就是 mock 數(shù)據(jù)的參數(shù)。
使用的時(shí)候，點(diǎn)選每一個(gè)狀態(tài)，將狀態(tài)值寫(xiě)入 localStorage 當(dāng)中，刷新頁(yè)面。axios 請(qǐng)求時(shí)檢測(cè)是否有 localStorage 配置，有的話取出對(duì)應(yīng)值，拼接到 YAPI mock 接口請(qǐng)求當(dāng)中，獲取到 mock 數(shù)據(jù)，然后頁(yè)面就是 mock 數(shù)據(jù)渲染出來(lái)的了。
初步嘗試后，可以讓我們?cè)陧?yè)面開(kāi)發(fā)過(guò)程中可以很方便得查看不同頁(yè)面下的頁(yè)面展現(xiàn)，相比于之前的要么是查詢線上數(shù)據(jù)，要么是通過(guò)數(shù)據(jù)構(gòu)造一步一步找到對(duì)應(yīng)狀態(tài)，都大大節(jié)省了時(shí)間，提升了效率。
同時(shí)對(duì)于產(chǎn)品和設(shè)計(jì)同學(xué)，也可以快速的找對(duì)對(duì)應(yīng)頁(yè)面的樣子，方便產(chǎn)品對(duì)現(xiàn)有頁(yè)面進(jìn)行調(diào)整，設(shè)計(jì)同學(xué)對(duì)頁(yè)面還原度進(jìn)行檢查等等。
不足之處也有，就是數(shù)據(jù)的維護(hù)，現(xiàn)在每一個(gè)狀態(tài)下存儲(chǔ)的都是一份完整的數(shù)據(jù)，如果某一部分調(diào)整了的話，那么所有的數(shù)據(jù)都要修改，數(shù)據(jù)越多，維護(hù)成本相對(duì)來(lái)說(shuō)也越高。
以上是基于現(xiàn)有基礎(chǔ)能力搭建出來(lái)的一個(gè)簡(jiǎn)單工具，當(dāng)然還有更多改進(jìn)空間，請(qǐng)多指教。
參考資料
?[1]axios-mock-adapter: https://github.com/ctimmerm/axios-mock-adapter
[2]Eruda 如何寫(xiě)插件: https://github.com/liriliri/eruda/blob/master/doc/PLUGIN.md
[3]Eruda 工具庫(kù): https://licia.liriliri.io/docs_cn.html
網(wǎng)站欄目：多狀態(tài)頁(yè)面中的Mock方案
文章路徑：http://www.5511xx.com/article/dhssgsi.html
