一个简单的函数消灭业务代码的低级错误
日常的前端开发业务代码中，我们经常都需要调试数据，所以要经常更改某些参数的初始化数据，或者更改过程中的数据。
但是很多时候，改了数据调试完之后就忘记改回去了，某个调试的场景是依赖一个参数的修改还好，但是需要依赖几个参数的修改，就很容易漏改回去了。
举两个例子：
一、我们有一个按钮来触发弹窗的打开，而控制弹窗显隐为变量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/
用法：
//引入包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/
用法：
//修改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使用，但不要再赋值给其他变量。
原文来自:http://www.ershing.cn/a-function-avoid-mistakes/
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
