編輯導(dǎo)語：在上一篇文章中，作者分析了中繼器在不同場景下的樣式處理方式。本文緊接上文，繼續(xù)分享了多個(gè)條件判斷的更優(yōu)雅的處理方式。

在上次的 《中繼器的不同場景下的樣式處理》里留了一個(gè)話題，如何處理多個(gè)條件判斷。即如果要滿足多個(gè)條件，如何遍歷每個(gè)場景并處理。繼續(xù)看一下上次的問題：

1. 有新消息，有免打擾
2. 有新消息，無免打擾
3. 無新消息，有免打擾
4. 無新消息，無免打擾

正常的思路和之前解釋的一樣，把上面這個(gè)4個(gè)場景遍歷一下，即：ifnew_msg == “1”并且mute ==”1″

–顯示小紅點(diǎn)，顯示免打擾圖標(biāo)

elseifnew_msg==”1″并且mute ==”0″

–顯示小紅點(diǎn)，不顯示免打擾圖標(biāo)

elseifnew_msg==”0″并且mute ==”1″

–不顯示小紅點(diǎn)，顯示免打擾圖標(biāo)

else ifnew_msg==”0″并且mute ==”0″

–不顯示小紅點(diǎn)，不顯示免打擾圖標(biāo)

如果有三個(gè)或更多條件，每個(gè)表達(dá)式里就有更多的判斷，非常麻煩。

一、交互處理

今天說的方法，使用Axure的是一個(gè)不起眼的動作：觸發(fā)事件，可能很少有人使用。

1. 在任意某個(gè)元件上，添加一個(gè)事件，例如單擊事件。
2. 這個(gè)事件只判斷一個(gè)條件，例如如果有新消息就顯示小紅點(diǎn)，否則不顯示。
3. 在另外一個(gè)元件上，重復(fù)1~2的步驟，處理其它條件判斷。
4. 在中繼器的每項(xiàng)加載事件里，分別觸發(fā)新加的元件上的事件。

這樣做的好處是：

1. 頂層的事件處理邏輯簡單
2. 每個(gè)條件單獨(dú)判斷，邏輯清晰

按照上面的步驟，我們看上次的問題如何處理：

1）在任意某個(gè)元件上，添加一個(gè)事件，例如單擊事件

為了不影響現(xiàn)有的內(nèi)容，我經(jīng)常是加一個(gè)熱區(qū)元件，因?yàn)樗緛碓诮缑媸蔷筒豢梢?，同時(shí)防止它響應(yīng)鼠標(biāo)事件，把它隱藏起來，這樣徹底不影響我們的界面操作。

2）這個(gè)事件只判斷一個(gè)條件，例如如果有新消息就顯示小紅點(diǎn)，否則不顯示

添加單擊事件，你也可以添加雙擊事件，后面觸發(fā)這個(gè)事件即可。事件里判斷new_msg，如果等于1就顯示小紅點(diǎn)，否則就隱藏。

3）在另外一個(gè)元件上，重復(fù)1~2的步驟，處理其它條件判斷

同理添加另外一個(gè)熱區(qū)元件，處理mute判斷。

4）在中繼器的每項(xiàng)加載事件里，分別觸發(fā)新加的元件上的事件

回到中繼器的每項(xiàng)加載事件里，簡化它原來的事件處理。

這里只有設(shè)置文本和兩個(gè)觸發(fā)事件，觸發(fā)的事件內(nèi)部做了邏輯判斷。因?yàn)橹欣^器的邏輯是可以實(shí)時(shí)看到的，看看預(yù)覽效果。

實(shí)際的預(yù)覽效果：

核對一下數(shù)據(jù)，看看是否與給定的條件相符：

• 第一個(gè)顯示新消息，顯示免打擾圖標(biāo)(new_msg=1,mute=1)。
• 第二個(gè)都不顯示(new_msg=0,mute=0)。
• 第三個(gè)只顯示免打擾(new_msg=0,mute=1)。
• 第四個(gè)只顯示新消息(new_msg=1,mute=0)。

是不是處理的方式更優(yōu)雅了呢？

如果有第三個(gè)條件，只要再加個(gè)熱區(qū)單擊事件處理，然后觸發(fā)它的事件。

二、小結(jié)

事件觸發(fā)操作就像函數(shù)調(diào)用一樣，在另外一個(gè)元件上添加好邏輯，然后去觸發(fā)它。這種方式處理的好處是邏輯簡單，思路清晰。

你一定要動手試一下哦~

本文由 @Axure原型設(shè)計(jì)工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議