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