前言:
我们编写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 }