標題圖借用 @老劉 https://zhuanlan.zhihu.com/p/91667659

業(yè)務中經(jīng)常碰到if-else多分支使用,嵌套使用的情況,業(yè)務邏輯一復雜,代碼就變得很難維護

,隨便改幾個字就報錯,眼睛要看花,使用策略模式又感覺通用性不太強

于是在摸索中寫了一個If()函數(shù),可以在很大程度上可以改善If-else所造成的的代碼難維護的問題

下面會結(jié)合一些業(yè)務場景介紹下基于自寫If()函數(shù)是如何解決此類問題的,看能不能在一定程度幫助大家解決if-else的常見痛點

If() 函數(shù)介紹: 基于javascript實現(xiàn),原理很簡單就是條件分支都添加到了數(shù)組中,類似于隊列,

基本概念:

//在javascript中 fn() //調(diào)用一個函數(shù) new fn() //實例一個對象 new fn().methods //調(diào)用對象中的方法

再說基本使用,免得一頭霧水:

If() //生成一個If實列化對象 const newIf=If() //實列化 // 其他接口:newIf.of() //調(diào)用of方法存放條件 newIf.fn() //調(diào)用fn方法存放函數(shù)體newIf.then() //調(diào)用then方法檢查條件并執(zhí)行**** 那么 If()函數(shù)是什么?****比如: //1 if(value===1){pass() }else{error()}// 用If函數(shù)修改等價于: If(1===1).then(pass,error)//或者使用鏈式調(diào)用 If(1===1).then(pass).then(error)//2 if(value===1){ pass() }else if(value===2){ error() }//等價于: If(value===1,value===2).then(pass,error) If(value===1,value===2).then(pass).then(error)**** If() 函數(shù)是通過函數(shù)式編程的方法解決if-else多分支的一種方案 ******** 不介紹原理,因為原理也相當簡單就是使用把所有分支添加到一個執(zhí)行隊列中主要是傳播一種解決問題的方法**** **** 那么if已經(jīng)很簡單了,這樣用有什么的好處? ****假設(shè)一種簡單的業(yè)務場景,通過boolean的狀態(tài)顯示或者隱藏一個按鈕并做一系列業(yè)務操作,一般是這么寫 if(value===true){show()other() }else{hide() }

后面業(yè)務需求改變了.不管boolean如何都顯示這個按鈕,但進行其他業(yè)務操作

if(value===true){show()other() }else{//hide() }// 現(xiàn)在代碼結(jié)構(gòu)有點不好看, 有代碼潔癖的朋友可能還會這樣改 value===true?show(),other():null這樣有個缺點這樣子改結(jié)構(gòu)簡潔了,但是萬一哪一天功能需要回退還要改回來,很麻煩

現(xiàn)在可以這樣改

#1 If(value===true). then(()=>show(),other()) //.then(()=>hide()) 萬一哪一天產(chǎn)品抽風了直接改回來,結(jié)構(gòu)也不錯

示范2 多分支使用:

other1() //各種業(yè)務代碼 if(value===1){}else if(value===2){}else if(value===3){}else if(value===4){}else if(value===5){}else if(value===6){}other2()

可以做邏輯檢查和函數(shù)執(zhí)行體的分離

#2***數(shù)據(jù)塊***//*邏輯檢查的數(shù)據(jù)* //數(shù)組格式 const condition=[value===1,value===2,value===3,value===4,value===5,value===6, ]//對象格式 const condition={check1:value===1,check2:value===1, }//*函數(shù)執(zhí)行體數(shù)據(jù)* action={action1:()=>{log(1)},action2:()=>{log(2)},........ }

使用If()函數(shù)修改后

... other1() //各種亂七八糟業(yè)務代碼 //具體執(zhí)行階段抽象成一行代碼 If(condition).then(action) // value=3 輸出3 other2() ...

這樣做好處顯而易見,抽象出來的數(shù)據(jù)如果依賴于多種狀態(tài)代碼是可以二次復用的,其次將

業(yè)務代碼與復雜的分支結(jié)構(gòu)進行了分離,讓代碼更好維護,結(jié)構(gòu)更加美觀清晰

如果業(yè)務邏輯足夠簡單的話還可以改成循環(huán)體使用

先把接口說一下

If()實列化// 參數(shù)存放類型為布爾值, 可接收數(shù)組或者對象或者函數(shù) If(arg[type:boolean,array,object,function]) If(value===1)If([value===1,value===2]) If({check1:value===1,check2:value===2}) //使用對象作為參數(shù)用于復雜分支場景下區(qū)分If([()=>{}]) // 函數(shù)需要返回布爾值 then方法// then 的參數(shù)存放函數(shù)執(zhí)行體 類型為數(shù)組, 對象,函數(shù),函數(shù)執(zhí)行體可接收參數(shù),If().then(arg[type:function,array,object]) then([fn1,fn2])then({fn1:fn1})then(fn1)```函數(shù)執(zhí)行體與布爾值的關(guān)系是一一映射的const condition=[value===1,value===2,value===3]const action=[()=>{},()=>{},()=>{}]If(condition).then(action) // condition[0]成立執(zhí)行action[0],以此類推

終極優(yōu)化環(huán)節(jié)

#3 //上面代碼改成 const newIf=If()[1,2,3,4,5,6].forEach((value,index)=> newIf.of(value===index).fn(()=>log(index)))newIf.then() // value=3 輸出3 兩段等價//newIf.of 這句話的意思是把布爾值存在newIf里面 //newIf.fn 是把函數(shù)體存在newIf里面 //then 對實列中的布爾值和函數(shù)體進行分支檢查

#1 #2 #3 三段代碼等價

示范3 解決-> 嵌套多分支的情況:

#1 if(){if(){if(){if(){if(){if(){} } } }} }

使用If函數(shù)修改

#2 const newIf=If() newIf.of(value===1) .then(()=>newIf.of(value===2) .then(()=>newIf.of(value===3)) .then(()=>newIf.of(value===4) .then(()=>newIf.of(value===5) .then(...)))) )

推薦:

#3 ..... action5=()=>newIf.of(value==4).then(action7) action4=()=>newIf.of(value==4).then(action6) action3=()=>newIf.of(value==4).then(action5) action3=()=>newIf.of(value==4).then(action4) action2=()=>newIf.of(value==3).then(action3) action1=()=>newIf.of(value==2).then(action2) newIf.of(value===1).then(action1)

業(yè)務邏輯簡單也可用循環(huán)優(yōu)化:

#4 const arr=[1,2,3,4,5,6].map((item,index)=>()=>newIf.of(value===index).then(arr[index+1])})newIf.of(v===1).then(arr[0])

#1 #2 #3 #4等價

延遲使用:

const newIf=If(value===1).fn(()=>{log(1)}) setTimeOut(newIf.then()) //輸出1

與函數(shù)體分離:

const newIf=If() newIf.of(value===1).fn(()=>log(1)) newIf.then() //輸出1

條件作為一個函數(shù)體使用+傳遞參數(shù)

If(()=>{return {boolean:true, // 作為函數(shù)使用必須返回一個對象,并且有boolean值value,age,name,....} }).then(({value,age,name})=>{log(value,age,name) })

進階使用

使用參數(shù)傳遞跳出無限遞歸:

有時候我們要根據(jù)一個數(shù)據(jù)的狀態(tài)發(fā)送一段信息,等待s秒后又要添加一段信息

let isTips=value===true if(isTips){sendMessage('1')setTimeout(()=>{if(isTips){setTimeout(()=>{ sendMessage('3')setTimeout(()=>{....},3000) }),2000)} //不確定x秒后的值sendMessage('2')},1000) }

現(xiàn)在這樣改

const isTips=()=>{return {boolean:value===3,message:message,delay:delay} } const send=({message,delay})=>{sendMessage(message)return delay }setTimeout(()=>{ res=If(isTips).then(send).result() // res等于send返回值},1000)

串聯(lián)使用--隨意的功能擴展

有時候也許需求經(jīng)常增加和刪除怎么改呢?

function run(){action1()action2()action3()//action4() }if(value===true){run() }

If函數(shù)這樣改

If(isTips) .then(()=>log(1)) // 輸出1 .then(()=>log(2)) // 輸出2 .then(()=>log(3)) // 輸出3 //.then(()=>log(4)) 依賴于最后一個條件輸出 只要是true 不斷執(zhí)行then函數(shù)體

鏈式調(diào)用 :

If(value===3).then(()=>log(...)) .of(value===3).then(()=>log(...)) .of(value===4).then(()=>log(...)) .of(value===5).then(()=>log(...))

異步使用+參數(shù)傳遞+延遲檢查+重復利用

const newIf=If()let value=0 newIf.of(()=> {return {boolean: value===3 value:value,state: value===3?通過:不通過text:'...'... } } )setTimeout(()=>{ value=3 } ,2000)setTimeout( ()=>{newIf.then(({value,state,...})=>{log(value,state) // value=0,state=不通過}) } ,1000)setTimeout( ()=>{newIf.then(({value,state,...})=>{log(value,state) // value=3 state=通過}) } ,5000)

總結(jié)

以上是生活随笔為你收集整理的else 策略模式去掉if_干掉if-else系列,可解决各种多分支嵌套,内联嵌套,复杂结构等,非策略模式的实现...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。