如何寫(xiě)好業(yè)務(wù)代碼？
在前端工作中有很多業(yè)務(wù)性代碼，如果書(shū)寫(xiě)不規(guī)范，那么對(duì)后期的維護(hù)將是非常致命的。

判斷配置化

業(yè)務(wù)場(chǎng)景

后端數(shù)據(jù)庫(kù)中經(jīng)常會(huì)一個(gè)字段具備幾個(gè)不同的狀態(tài)，比如：

status: 2 // 各個(gè)字段對(duì)應(yīng)的含義 0: 出生 1: 兒童 2: 少年 3: 中年 4: 老年 復(fù)制代碼

• 這樣不同的數(shù)字代表的含義，需要在前端展示。
• 需要根據(jù)不同的狀態(tài)，前端去做不同的處理

方法一（switch）（bad）

下面這段代碼就是常見(jiàn)的無(wú)限if/else或者switch場(chǎng)景

// 業(yè)務(wù)代碼 switch (status) {case 0: // do somethingreturn '出生';case 1:// do somethingreturn '兒童';... ...default:return ''; } 復(fù)制代碼

這樣做是不好的，因?yàn)槿绻蠖嗽偌恿艘粋€(gè)字段，比如

5: 已死亡 復(fù)制代碼

那么前端需要重新修改switch函數(shù)，這樣需要去修改對(duì)應(yīng)的業(yè)務(wù)函數(shù)，無(wú)疑破壞了業(yè)務(wù)代碼的完整性。

方法二（寫(xiě)成配置文件）（better）

// cfg.js export const cfg = new Map([[0, 出生],[1, 兒童],[2, 少年],... ... ]);// 業(yè)務(wù)代碼 cfg.get(status) 復(fù)制代碼

但是這樣僅僅是顯示相關(guān)的狀態(tài)，如果涉及到狀態(tài)的判斷，那這樣的處理方式就有些問(wèn)題了，比如需要根據(jù)具體的狀態(tài)去做對(duì)應(yīng)的判斷

switch (status) {case 0:// do somethingreturn ;... ...} 復(fù)制代碼

像上面的情況，又變成了第一種情況，顯然這種配置化的方式并不能滿(mǎn)足。如果將對(duì)應(yīng)的操作，與配置分割，則代碼更加不易維護(hù)。

方法三（升級(jí)配置文件，處理代碼集中）（better）

將狀態(tài)處理集中起來(lái)，如果能將狀態(tài)展示和對(duì)應(yīng)的狀態(tài)封裝起來(lái)，那么就會(huì)讓后期代碼維護(hù)顯得十分集中。

// cfg.js const status = new Map([[0, 出生],[1, 兒童],[2, 少年],... ... ]); const checkIsBirth = (status, callback) => {if(status === 0) {callback && callback()} } export default {status,checkIsBirth } // 在具體使用中 import Person from './cfg.js' const a = 1; Person.status.get(a); Person.checkIsBirth(a, () => {console.log('Person is in Birth state'); }) 復(fù)制代碼

這樣處理，如果以后status發(fā)生變化，只需要修改checkIsBirth中的判斷邏輯就可以，只需要改動(dòng)一處。

代碼配置化

在使用react編寫(xiě)代碼的過(guò)程中，經(jīng)常用到這樣的情況，根據(jù)情況判斷是否展示對(duì)應(yīng)的組件。

方法一（流水線工作）（bad）

function Business({status, bug}) {return (<Fragment>{status === 0? (<div>123</div>): null}{bug === 1? (<div>456</div>): null}</Fragment>); } 復(fù)制代碼

這樣的寫(xiě)法如果僅僅只有一個(gè)其實(shí)還好，如果有很多個(gè)，在代碼中會(huì)造成代碼非常冗長(zhǎng)，使假想一個(gè)頁(yè)面中如果有很多這樣的，代碼看起來(lái)非常ugly。所以建議將代碼分割開(kāi)來(lái)，形成一個(gè)個(gè)小的組件，將對(duì)應(yīng)的代碼封裝起來(lái)，將會(huì)使代碼可讀性提高一些。

方法二（組件粒度細(xì)化）（better）

function Business() {return (<Fragment><One isShow={status === 0} /><One isShow={bug === 1} /></Fragment>); }// One function One({isShow}) {return (<Fragment>{isShow === true? (<div>123</div>): null}</Fragment>); }// Two function Two({isShow}) {return (<Fragment>{isShow === true? (<div>456</div>): null}</Fragment>); } 復(fù)制代碼

如果經(jīng)常這么寫(xiě)是不是會(huì)覺(jué)得很煩，可以將通用的邏輯抽象為通用的組件。

方法三（高階組件）（better）

其實(shí)可以觀望一下decorator以后的用法,暫時(shí)沒(méi)有找到使用的切入點(diǎn)。

function IsShowCom(isShow, Wrapped) {if (isShow === true) {return (Wrapped) => <Wrapped />}return () => null; } // 如果你想轉(zhuǎn)發(fā)ref，你得這么做 function IsShowCom(isShow, Wrapped) {if (isShow === true) {return React.forwardRef((props, ref) => {return <Wrapped {...props} ref={ref} /> });}return () => null; } // import IsShowCom from './isShowCom';function Business() {const One = IsShowCom(status === 0,<div>123</div>);const Two = IsShowCom(bug === 1,<div>456</div>);return (<Fragment><One/><Two/></Fragment>); } 復(fù)制代碼

注意??

不要在render中使用高階組件，因?yàn)楦唠A組件每次返回來(lái)的都是新的組件，會(huì)使子組件的狀態(tài)丟失 。但是在無(wú)狀態(tài)組件中，這樣使用并沒(méi)有什么問(wèn)題，因?yàn)闊o(wú)狀態(tài)組件本身就是隨參數(shù)的變化而變化的，只是可能會(huì)產(chǎn)生性能問(wèn)題。

總結(jié)

前端配置化的整體思路：

• 針對(duì)不同值進(jìn)行不同處理的時(shí)候，思考一下，是不是可以將判斷邏輯代碼集中起來(lái)。
• 針對(duì)組件的顯示/隱藏，可以將具體的隱藏邏輯封裝為高階組件，便于維護(hù)

轉(zhuǎn)載于:https://juejin.im/post/5cfbcff051882555f4465fac

總結(jié)

以上是生活随笔為你收集整理的业务代码配置化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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