前言:
我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,我借鉴了下美文如下:
举个栗子:
1 const onButtonClick = (status)=>{ 2 if(status == 1){ 3 sendLog('processing') 4 jumpTo('IndexPage') 5 }else if(status == 2){ 6 sendLog('fail') 7 jumpTo('FailPage') 8 }else if(status == 3){ 9 sendLog('fail')10 jumpTo('FailPage')11 }else if(status == 4){12 sendLog('success')13 jumpTo('SuccessPage')14 }else if(status == 5){15 sendLog('cancel')16 jumpTo('CancelPage')17 }else {18 sendLog('other')19 jumpTo('Index')20 }21 }
通过代码可以看到这个按钮的点击逻辑:根据不同活动状态做两件事情,发送日志埋点和跳转到对应页面,大家可以很轻易的提出这段代码的改写方案,switch出场:
/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick = (status)=>{ switch (status){ case 1: sendLog('processing') jumpTo('IndexPage') break case 2: case 3: sendLog('fail') jumpTo('FailPage') break case 4: sendLog('success') jumpTo('SuccessPage') break case 5: sendLog('cancel') jumpTo('CancelPage') break default: sendLog('other') jumpTo('Index') break }}
嗯,这样看起来比if/else清晰多了,细心的同学也发现了小技巧,case 2和case 3逻辑一样的时候,可以省去执行语句和break,则case 2的情况自动执行case 3的逻辑。
还有更简单的写法:
1 const actions = { 2 '1': ['processing','IndexPage'], 3 '2': ['fail','FailPage'], 4 '3': ['fail','FailPage'], 5 '4': ['success','SuccessPage'], 6 '5': ['cancel','CancelPage'], 7 'default': ['other','Index'], 8 } 9 /**10 * 按钮点击事件11 * @param {number} status 活动状态:1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消12 */13 const onButtonClick = (status)=>{14 let action = actions[status] || actions['default'],15 logName = action[0],16 pageName = action[1]17 sendLog(logName)18 jumpTo(pageName)19 }
这种方法的聪明之处在于:将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,在按钮点击的时候,通过对象属性查找的方式来进行逻辑判断,这种写法特别适合一元条件判断的情况。
1 const actions = new Map([ 2 [1, ['processing','IndexPage']], 3 [2, ['fail','FailPage']], 4 [3, ['fail','FailPage']], 5 [4, ['success','SuccessPage']], 6 [5, ['cancel','CancelPage']], 7 ['default', ['other','Index']] 8 ]) 9 /**10 * 按钮点击事件11 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消12 */13 const onButtonClick = (status)=>{14 let action = actions.get(status) || actions.get('default')15 sendLog(action[0])16 jumpTo(action[1])17 }
我们需要把问题升级一下,以前按钮点击时候只需要判断status,现在还需要判断用户的身份:
/** * 按钮点击事件 * @param {number} status 活动状态:1开团进行中 2开团失败 3 开团成功 4 商品售罄 5 有库存未开团 * @param {string} identity 身份标识:guest客态 master主态 */const onButtonClick = (status,identity)=>{ if(identity == 'guest'){ if(status == 1){ //do sth }else if(status == 2){ //do sth }else if(status == 3){ //do sth }else if(status == 4){ //do sth }else if(status == 5){ //do sth }else { //do sth } }else if(identity == 'master') { if(status == 1){ //do sth }else if(status == 2){ //do sth }else if(status == 3){ //do sth }else if(status == 4){ //do sth }else if(status == 5){ //do sth }else { //do sth } }}
二元判断时
1 const actions = new Map([ 2 ['guest_1', ()=>{ /*do sth*/}], 3 ['guest_2', ()=>{ /*do sth*/}], 4 ['guest_3', ()=>{ /*do sth*/}], 5 ['guest_4', ()=>{ /*do sth*/}], 6 ['guest_5', ()=>{ /*do sth*/}], 7 ['master_1', ()=>{ /*do sth*/}], 8 ['master_2', ()=>{ /*do sth*/}], 9 ['master_3', ()=>{ /*do sth*/}],10 ['master_4', ()=>{ /*do sth*/}],11 ['master_5', ()=>{ /*do sth*/}],12 ['default', ()=>{ /*do sth*/}],13 ])14 15 /**16 * 按钮点击事件17 * @param {string} identity 身份标识:guest客态 master主态18 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团19 */20 const onButtonClick = (identity,status)=>{21 let action = actions.get(`${identity}_${status}`) || actions.get('default')22 action.call(this)23 }
用Object对象来实现
const actions = { 'guest_1':()=>{ /*do sth*/}, 'guest_2':()=>{ /*do sth*/}, //....}const onButtonClick = (identity,status)=>{ let action = actions[`${identity}_${status}`] || actions['default'] action.call(this)}
用Map对象,以Object对象作为key:
1 const actions = new Map([ 2 [{identity:'guest',status:1},()=>{ /*do sth*/}], 3 [{identity:'guest',status:2},()=>{ /*do sth*/}], 4 //... 5 ]) 6 7 const onButtonClick = (identity,status)=>{ 8 let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status)) 9 action.forEach(([key,value])=>value.call(this))10 }