資訊專欄INFORMATION COLUMN
摘要：常見例子如何優(yōu)雅地輸出今天星期幾今天星期日一二三四五六上面的例子可以看到表就是一個(gè)字符串參考資料表驅(qū)動(dòng)法數(shù)據(jù)驅(qū)動(dòng)編程
前端中的if/else
在編寫業(yè)務(wù)代碼的時(shí)候，經(jīng)常會(huì)出現(xiàn)條件判斷，如果判斷條件眾多，就會(huì)出現(xiàn)if/else天梯，如果新的業(yè)務(wù)場景出現(xiàn)，就需要再添加一個(gè)if/else，這樣的代碼維護(hù)起來，簡直是災(zāi)難。
if (status === 0) {
//do something
} else if (status === 1) {
//do something
} else if (status === 2) {
//do something
} else if (status === 3) {
// do something
}
如果新的業(yè)務(wù)場景出現(xiàn)，status === 4，那就需要再寫一個(gè)if else，這樣的代碼可讀性太差了。
簡單if/else ----> 三元表達(dá)式我們先從最簡單的方式if/else進(jìn)行改寫
場景：
if (status === 0) {
action()
} else {
do();
}
像上面的狀態(tài)判斷，其實(shí)是沒有必要的，那么如何進(jìn)行判斷的改寫呢？
消除else上面的else沒有什么必要
if (status === 0) {
action()
}
do();
使用三元表達(dá)式
status === 0 ? action() : do()
這樣是不是更加簡潔？毫無疑問
if/else 天梯轉(zhuǎn)變?yōu)閟witch 天梯經(jīng)過了簡單的if/else，那么我們來看一下，多重if/else如果進(jìn)行改寫？可以通過switch進(jìn)行改良代碼
switch (status) {
case 0:
// ...
case 1:
// ...
case 2:
// ...
default:
//...
}
但是這樣無非只是將if else轉(zhuǎn)變?yōu)榱藄witch，提高了代碼的可讀性。當(dāng)遇到新的場景的時(shí)候，還是需要到switch里面去修改對應(yīng)的代碼。
使用map，將代碼配置化定義一個(gè)map，里面存儲(chǔ)對應(yīng)的狀態(tài)和對應(yīng)狀態(tài)的操作
const statusMap = new Map([ [0, doStatusZero], [1, doStatusOne], [2, doStatusThree] ]); // 當(dāng)遇到對應(yīng)的狀態(tài)的時(shí)候，只需要 statusMap.get(status)();
如果可以的化，可以將配置文件抽離，形成一個(gè)配置文件，如果有新的狀態(tài)改變，只需要改變配置文件就ok了。
匹配對應(yīng)的規(guī)則使用map的好處，是代碼可行性和整潔性提高了一個(gè)層次，但是只適用于一個(gè)單一的判斷規(guī)則。如果具備多個(gè)判斷的時(shí)候怎么辦？假如一個(gè)判斷是這樣的，if(status === 0 && done === true && success == true), 那這樣map簡單配置的方式就不可以了，那既然簡單不行，那就來電稍微復(fù)雜點(diǎn)的唄。
本質(zhì)上if/else邏輯是一種狀態(tài)匹配，轉(zhuǎn)變?yōu)橛?jì)算機(jī)的方式就是模式匹配，單一的模式不能滿足需要，那就創(chuàng)建一個(gè)多元模式匹配。
場景：需要判斷三種狀態(tài) status/done/success
多元狀態(tài)匹配，需要進(jìn)行兩步操作
判斷狀態(tài)是否匹配
匹配完成要完成的動(dòng)作
基于上面兩種行為，我們將map抽象為下面的方式
const judgeMap = new Map([
[
(status, done, success) => status === 0 && done === 1 && success === 1,
() => {
// do something
}
],
[
(status, done, success) => status === 1 && done === 1 && success === 1,
() => {
// do something
}
]
]);
for (let [rule, action] of judgeMap) {
rule(status, done, success) && action()
}
總結(jié)
其實(shí)整個(gè)思想來源于表驅(qū)動(dòng)法，使用表數(shù)據(jù)，存儲(chǔ)對應(yīng)的狀態(tài)處理。其中表的概念，不局限于一個(gè)簡單的map也可能是一個(gè)數(shù)組或者對象甚至是一個(gè)字符串，表的結(jié)構(gòu)可以自己定義。常見例子
如何優(yōu)雅地輸出今天星期幾？
`今天星期${"日一二三四五六".charAt((new Date()).getDay())}`
上面的例子可以看到表就是一個(gè)字符串
參考資料表驅(qū)動(dòng)法
數(shù)據(jù)驅(qū)動(dòng)編程
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106625.html
摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見的軟件架構(gòu)設(shè)計(jì)模式，它通過分離關(guān)注點(diǎn)來改進(jìn)代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對這樣的一團(tuán)亂麻，簡單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差，有沒...
摘要：第二步盡量少使用如果在函數(shù)中，可以使用，先判斷錯(cuò)誤條件，然后立馬結(jié)束函數(shù)，防止進(jìn)入分支。在大多數(shù)情況下，的性能不會(huì)比低。 那么問題來了，在js開發(fā)中，如何減少if else語句的使用 代碼中嵌套的if/else結(jié)構(gòu)往往導(dǎo)致代碼不美觀，也不易于理解。面向過程的開發(fā)中代碼有大量的IF ELSE，在java中可以用一些設(shè)計(jì)模式替換掉這些邏輯，那么在js中是否也有類似的方法用來盡可能減少代碼中...
摘要：前端中的計(jì)算機(jī)領(lǐng)域的通常認(rèn)為起源于。并對其主要內(nèi)容作了自己的解讀。搬到另一個(gè)地區(qū)會(huì)導(dǎo)致名氣降低。年度報(bào)告，年最受歡迎的編程語言年上最流行的種編程語言及前十最火熱的項(xiàng)目排行榜，分別由及登頂。技術(shù)周刊由小組出品，匯聚一周好文章，周刊原文。 showImg(https://segmentfault.com/img/bVWHC4?w=1000&h=710); 本期推薦 反擊爬蟲，前端工程師的腦...
摘要：因?yàn)橛脩舨挥迷诘谝淮芜M(jìn)入應(yīng)用時(shí)下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護(hù)的代碼高階函數(shù)可以幫助你增強(qiáng)你的，讓你的代碼更具有聲明性。知道什么時(shí)候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個(gè)挺靠譜的封裝(報(bào)錯(cuò),鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...
摘要：大多數(shù)模板實(shí)現(xiàn)原理基本一致模板字符串首先通過各種手段剝離出普通字符串和模板語法字符串生成抽象語法樹然后針對模板語法片段進(jìn)行編譯，期間模板變量均去引擎輸入的變量中查找模板語法片段生成出普通片段，與原始普通字符串進(jìn)行拼接輸出。 前端模板的發(fā)展 模板可以說是前端開發(fā)最常接觸的工具之一。將頁面固定不變的內(nèi)容抽出成模板，服務(wù)端返回的動(dòng)態(tài)數(shù)據(jù)裝填到模板中預(yù)留的坑位，最后組裝成完整的頁面html字符...
