摘要：所以在這些業(yè)務(wù)代碼中，我相信也沒(méi)什么人會(huì)做構(gòu)建前的校驗(yàn)?zāi)_本或者單元測(cè)試的，所以我們需要一個(gè)簡(jiǎn)單的函數(shù)來(lái)控制變量的賦值，來(lái)避免這種低級(jí)錯(cuò)誤。

日常的前端開(kāi)發(fā)業(yè)務(wù)代碼中，我們經(jīng)常都需要調(diào)試數(shù)據(jù)，所以要經(jīng)常更改某些參數(shù)的初始化數(shù)據(jù)，或者更改過(guò)程中的數(shù)據(jù)。

但是很多時(shí)候，改了數(shù)據(jù)調(diào)試完之后就忘記改回去了，某個(gè)調(diào)試的場(chǎng)景是依賴(lài)一個(gè)參數(shù)的修改還好，但是需要依賴(lài)幾個(gè)參數(shù)的修改，就很容易漏改回去了。

舉兩個(gè)例子：

一、我們有一個(gè)按鈕來(lái)觸發(fā)彈窗的打開(kāi)，而控制彈窗顯隱為變量showDialog，初始化值為false，但是產(chǎn)品說(shuō)彈窗里面的樣式有點(diǎn)問(wèn)題，所以我們?cè)O(shè)置了showDialog的值為true然后修改內(nèi)容（因?yàn)椴豢赡苊看味键c(diǎn)擊按鈕來(lái)打開(kāi)看彈窗效果），最后修改完再將showDialog設(shè)置回false。

//偽代碼
var showDialog = false;  //控制窗口顯隱，調(diào)試需要依賴(lài)其變量值
btn.onclick = () => {
  showDialog = true; 
}

二、我們有個(gè)抽獎(jiǎng)的活動(dòng)，邏輯是請(qǐng)求接口之后拿到抽獎(jiǎng)的prize_id之后，對(duì)比prize_id的內(nèi)容，然后決定在視圖中顯示出來(lái)，但是我們需要調(diào)試某個(gè)抽獎(jiǎng)結(jié)果的內(nèi)容，當(dāng)然不會(huì)叫接口改返回的prize_id了，所以我們可能會(huì)改傳入顯示模塊的值。

//偽代碼
fetch().then(prize_id => {
  showResult(prize_id)  //顯示抽獎(jiǎng)結(jié)果，調(diào)試需要依賴(lài)其傳入值
})

function?showResult(prize_id){
  //顯示抽獎(jiǎng)結(jié)果的代碼
}

問(wèn)題就在于，很多時(shí)候我們最后忘了改回去，就會(huì)出現(xiàn)彈窗直接打開(kāi)了、每次抽獎(jiǎng)都抽中某個(gè)獎(jiǎng)品的結(jié)果了，這種低級(jí)錯(cuò)誤是不應(yīng)該犯的，但是我也見(jiàn)過(guò)某些app真的直接這樣上了測(cè)試的代碼到生產(chǎn)環(huán)境。

所以在這些業(yè)務(wù)代碼中，我相信也沒(méi)什么人會(huì)做構(gòu)建前的校驗(yàn)?zāi)_本或者單元測(cè)試的，所以我們需要一個(gè)簡(jiǎn)單的函數(shù)來(lái)控制變量的賦值，來(lái)避免這種低級(jí)錯(cuò)誤。

特意寫(xiě)了一個(gè)簡(jiǎn)單的包：https://github.com/ershing/de...

用法：

//引入包dev-debugger
import DevDebugger from "dev-debugger"
//初始化dgb實(shí)例來(lái)控制變量的測(cè)試值
let dbg = new DevDebugger({ debug: true })
//綁定獲取替換的方法，也可以直接調(diào)用dbg.debugVal
let _r = dbg.debugVal.bind(dbg)

實(shí)例有兩個(gè)方法：debugVal和debugCaseTag

/*
  debugVal(pro, dev)
  @params 傳入第一參數(shù)為生產(chǎn)值，第二參數(shù)為調(diào)試值
*/
//也可以綁定方便后面調(diào)用
let _r = dbg.debugVal.bind(dbg)


/*
  debugCaseTag(pro, tag)
  @params 傳入第一參數(shù)為生產(chǎn)值，第二參數(shù)為自命名的唯一標(biāo)簽名稱(chēng)
*/
//前提需要配合初始化的傳參
let dbg = new DevDebugger({ 
  debug: true,
  caseName: "testPrize1",  //調(diào)試的用例
  cases: {  //用例參數(shù)集
    "testPrize1": {
      "myPrize": 3   //標(biāo)簽名稱(chēng)對(duì)應(yīng)的調(diào)試值
    },
    "testPrize2": {
      "myPrize": 6   //標(biāo)簽名稱(chēng)對(duì)應(yīng)的調(diào)試值
    }
  }
})

//也可以綁定方便后面調(diào)用 
let _rt = dbg.debugCaseTag.bind(dbg)

所以上面的例子可以這樣寫(xiě)：

一、控制showDialog的變量值

//偽代碼
var showDialog = _r(false, true);  //debug時(shí)值為true
btn.onclick = () => {
  showDialog = true; 
}

二、控制傳入顯隱函數(shù)的值

//偽代碼
fetch().then(prize_id => {
  showResult(_r(prize_id, 3))  //debug時(shí)為3
})

function?showResult(prize_id){
  //顯示抽獎(jiǎng)結(jié)果的代碼
}

當(dāng)然上面也可以用debugCaseTag方法來(lái)將調(diào)試的值放在初始化的函數(shù)當(dāng)中。

然而，在我們構(gòu)建代碼的時(shí)候，當(dāng)然不想有任何調(diào)試的代碼和調(diào)試的值的，所以我又寫(xiě)了一個(gè)babel插件：https://github.com/ershing/ba...

用法：

//修改babel.config.js文件
module.exports = {
  "plugins": 
  process.env.NODE_ENV === "production" 
  ? ["babel-plugin-dev-debugger"] 
  : []
}

注意：

使用這個(gè)babel插件的話，需要在各自文件中import包dev-debugger（也利于單文件組件的獨(dú)立調(diào)試），而且不要將實(shí)例方法賦值出去，可以直接dbg.debugVal或dbg.debugCaseTag使用，也可以bind之后_t或_rt使用，但不要再賦值給其他變量。

我的博客很久沒(méi)怎么寫(xiě)了，回頭看看以前寫(xiě)的技術(shù)文章就像垃圾一樣：www.ershing.cn