第JS技巧多狀態(tài)頁(yè)面中的mock方案詳解目錄引言技術(shù)選型業(yè)務(wù)邏輯改造Eruda插件Mock數(shù)據(jù)整理

引言

我們有時(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ò)的話(huà)只能重新來(lái)一遍。

后期維護(hù)階段也不容易構(gòu)造對(duì)應(yīng)狀態(tài)的數(shù)據(jù)，導(dǎo)致排查頁(yè)面問(wèn)題比較耗時(shí)。

另外一個(gè)問(wèn)題就是從頭熟悉業(yè)務(wù)的話(huà)成本比較高，如果有一個(gè)直觀(guān)的頁(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è)了客戶(hù)端工具和eruda，再多就亂套了，所以最好集成在現(xiàn)有的工具基礎(chǔ)上?？蛻?hù)端部分功能我們接觸不到也不了解，在現(xiàn)有條件下只有eruda可用。

Eruda是一個(gè)很強(qiáng)大的前端頁(yè)面調(diào)試工具庫(kù)，我們客戶(hù)端webview也內(nèi)置了，在測(cè)試包中可以很方便的借助eruda調(diào)試頁(yè)面，觀(guān)察日志。同時(shí)eruda也支持插件，通過(guò)插件來(lái)擴(kuò)展eruda的功能。我們的工具就基于eruda插件來(lái)實(shí)現(xiàn)。

實(shí)現(xiàn)效果預(yù)覽：

總體流程如下：

整個(gè)流程大概三個(gè)部分組成

業(yè)務(wù)邏輯改造Eruda插件mock數(shù)據(jù)整理

業(yè)務(wù)邏輯改造

首先要實(shí)現(xiàn)這樣一個(gè)方案核心依賴(lài)于業(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)接口方法的攔截。

axiosadapter

借助axios-mock-adapter[1]，可以很方便的實(shí)現(xiàn)我們的需求。

import{axiosInstance}from'@zz/fetch';

importMockAdapterfrom'axios-mock-adapter';

exportconstmock=newMockAdapter(axiosInstance)

try{

//借助localstorage實(shí)現(xiàn)eruda插件和axios-mock-adapter通信

constmockReqConf=JSON.parse(localStorage.getItem('_mock_req'))

if(mockReqConfmockReqConf.mockId){

mock.onGet(api.getOrderDetail).reply(config={

//console.log('mockapi',api.getOrderDetail)

returnaxiosInstance.get('/orderdetailmockId='+mockReqConf.mockId)

mock.onAny()

.passThrough()

constisProduction=process.env.NODE_ENV==='production'

if(isProduction||(mockReqConfmockReqConf.mockId==='')){

//sessionStorage實(shí)現(xiàn)開(kāi)關(guān)，如果沒(méi)有此配置，就重置設(shè)置的mock攔截

if(!sessionStorage.getItem('mock-adapter')){

mock.restore()

}catch(error){

console.log('mockadapterconfigerror',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]/liriliri/er

Eruda工具庫(kù)[3]licia.liriliri.io/docs_cn.htm

Eruda插件寫(xiě)法類(lèi)比較像一個(gè)小的模板庫(kù)，eruda提供了插件模板，綁定事件方式類(lèi)似于jQuery語(yǔ)法，eruda提供的licia工具庫(kù)均有對(duì)應(yīng)方法，參考即可。

(function(root,factory){

if(typeofdefine==='function'define.amd){

define([],factory);

}elseif(typeofmodule==='object'module.exports){

module.exports=factory();

}else{

root.erudaPlugin=factory();

})(this,function(){

returnfunction(eruda){

varTool=eruda.Tool,

util=eruda.util;

varPlugin=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(

'divPutwhateveryouwanthere:)/div'

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);

returnnewPlugin();

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è)是否有l(wèi)ocalStorage配置，有的話(huà)取出對(duì)應(yīng)值，拼接到Y(jié)APImock接口請(qǐng)求當(dāng)中，獲取到mock數(shù)據(jù)，然后頁(yè)面就是mock數(shù)據(jù)渲染出來(lái)的了。

初步嘗試后，可以讓我們?cè)陧?yè)面開(kāi)發(fā)過(guò)程中可以很方便得查看不同頁(yè)面下的頁(yè)面展現(xiàn)，相比于之前的要么是查詢(xún)線(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)整了的話(huà)，那么所有的數(shù)據(jù)都要修改，數(shù)據(jù)越多，維護(hù)成本相對(duì)來(lái)說(shuō)也越高。

以上是基于現(xiàn)有基礎(chǔ)能力搭建出來(lái)的一個(gè)簡(jiǎn)單工具，當(dāng)