一個簡單的函數消滅業務代碼的低級錯誤

平常的前端開發業務代碼中，咱們常常都須要調試數據，因此要常常更改某些參數的初始化數據，或者更改過程當中的數據。

可是不少時候，改了數據調試完以後就忘記改回去了，某個調試的場景是依賴一個參數的修改還好，可是須要依賴幾個參數的修改，就很容易漏改回去了。

舉兩個例子：

1、咱們有一個按鈕來觸發彈窗的打開，而控制彈窗顯隱爲變量showDialog，初始化值爲false，可是產品說彈窗裏面的樣式有點問題，因此咱們設置了showDialog的值爲true而後修改內容（由於不可能每次都點擊按鈕來打開看彈窗效果），最後修改完再將showDialog設置回false。

//僞代碼
var showDialog = false;  //控制窗口顯隱，調試須要依賴其變量值
btn.onclick = () => {
  showDialog = true; 
}

2、咱們有個抽獎的活動，邏輯是請求接口以後拿到抽獎的prize_id以後，對比prize_id的內容，而後決定在視圖中顯示出來，可是咱們須要調試某個抽獎結果的內容，固然不會叫接口改返回的prize_id了，因此咱們可能會改傳入顯示模塊的值。

//僞代碼
fetch().then(prize_id => {
  showResult(prize_id)  //顯示抽獎結果，調試須要依賴其傳入值
})

function showResult(prize_id){
  //顯示抽獎結果的代碼
}

問題就在於，不少時候咱們最後忘了改回去，就會出現彈窗直接打開了、每次抽獎都抽中某個獎品的結果了，這種低級錯誤是不該該犯的，可是我也見過某些app真的直接這樣上了測試的代碼到生產環境。

因此在這些業務代碼中，我相信也沒什麼人會作構建前的校驗腳本或者單元測試的，因此咱們須要一個簡單的函數來控制變量的賦值，來避免這種低級錯誤。

特地寫了一個簡單的包：https://github.com/ershing/de...

用法：

//引入包dev-debugger
import DevDebugger from 'dev-debugger'
//初始化dgb實例來控制變量的測試值
let dbg = new DevDebugger({ debug: true })
//綁定獲取替換的方法，也能夠直接調用dbg.debugVal
let _r = dbg.debugVal.bind(dbg)

實例有兩個方法：debugVal和debugCaseTag

/*
  debugVal(pro, dev)
  @params 傳入第一參數爲生產值，第二參數爲調試值
*/
//也能夠綁定方便後面調用
let _r = dbg.debugVal.bind(dbg)


/*
  debugCaseTag(pro, tag)
  @params 傳入第一參數爲生產值，第二參數爲自命名的惟一標籤名稱
*/
//前提須要配合初始化的傳參
let dbg = new DevDebugger({ 
  debug: true,
  caseName: 'testPrize1',  //調試的用例
  cases: {  //用例參數集
    'testPrize1': {
      'myPrize': 3   //標籤名稱對應的調試值
    },
    'testPrize2': {
      'myPrize': 6   //標籤名稱對應的調試值
    }
  }
})

//也能夠綁定方便後面調用 
let _rt = dbg.debugCaseTag.bind(dbg)

因此上面的例子能夠這樣寫：

1、控制showDialog的變量值

//僞代碼
var showDialog = _r(false, true);  //debug時值爲true
btn.onclick = () => {
  showDialog = true; 
}

2、控制傳入顯隱函數的值

//僞代碼
fetch().then(prize_id => {
  showResult(_r(prize_id, 3))  //debug時爲3
})

function showResult(prize_id){
  //顯示抽獎結果的代碼
}

固然上面也能夠用debugCaseTag方法來將調試的值放在初始化的函數當中。

然而，在咱們構建代碼的時候，固然不想有任何調試的代碼和調試的值的，因此我又寫了一個babel插件：https://github.com/ershing/ba...

用法：

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

注意：

使用這個babel插件的話，須要在各自文件中import包dev-debugger（也利於單文件組件的獨立調試），並且不要將實例方法賦值出去，能夠直接dbg.debugVal或dbg.debugCaseTag使用，也能夠bind以後_t或_rt使用，但不要再賦值給其餘變量。

個人博客好久沒怎麼寫了，回頭看看之前寫的技術文章就像垃圾同樣：www.ershing.cn