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

YFan 發布于2019-08-26 10:42 / 669人閱讀

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

日常的前端開發業務代碼中，我們經常都需要調試數據，所以要經常更改某些參數的初始化數據，或者更改過程中的數據。

但是很多時候，改了數據調試完之后就忘記改回去了，某個調試的場景是依賴一個參數的修改還好，但是需要依賴幾個參數的修改，就很容易漏改回去了。

舉兩個例子：

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

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

二、我們有個抽獎的活動，邏輯是請求接口之后拿到抽獎的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)

所以上面的例子可以這樣寫：

一、控制showDialog的變量值

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

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

//偽代碼
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

云服務器 GPU云服務器簡單的html代碼低級錯誤 php簡單的登錄代碼最簡單的asp代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106629.html

程序員日常工作中如何正確的偷懶？

摘要：大胖心急啊，自認為也是個優秀的程序員啊，再出現低級錯誤的話，專業能力會被人懷疑的。此時大胖已經在積極的謀劃了，他深深明白了日常的工作中也有很多可以提升的空間，而這些提升不僅僅是技術上的，更多的是思路和思想上了。 showImg(https://segmentfault.com/img/bVbooVj?w=1080&h=1920);這是北京的雪，昨天剛拍的又是一個艷陽天，張大胖像一個天...

jaysun 2019-08-23 15:13 評論0 收藏0
眼淚是真的、心酸是真的手工測試會迷茫是必然的、還在手工測試的也該醒醒了...

摘要：寫這篇文章就是想了解手工測試現在的處境為什么手工測試會迷茫呢不知道自動化測試性能測試會不會迷茫。我認為手工測試的迷茫基于兩個原因一是重復的測試相同的方法測到自己找不著北，有一天猛然抬頭大喊我要改變世界，改變自己，暗示自己換一種工作方法。 ...

gaomysion 2021-09-04 16:40 評論0 收藏0
【debug】事件綁定代碼中的一個低級錯誤導致的內存泄漏

摘要：靜下來想了想發現我犯了一個低級錯誤。上面的代碼中函數是在這個函數閉包中申明的，在這個函數執行完畢后，由于它被綁上了事件，引用并不為，所以沒有被回收。最近寫一個web應用的圖片上傳功能，里面有這么個場景：點擊上傳按鈕，呼出file input框，選擇完圖片進行前端壓縮然后上傳，完畢后將返回的圖片鏈接展示給用戶。這個功能很常見，但是在這里卻翻了船，所以專門記錄一下這個bug。我是這么寫...

XboxYan 2019-08-21 17:09 評論0 收藏0