编者按:在最后一篇文章中，作者分析了不同场景下复读机的风格处理方法。本文继续分享对多重条件判断的更优雅的处理。

上一期《复读机不同场景下的风格处理》留下了一个话题，如何处理多重条件判断。即如果要满足多个条件，如何遍历每个场景并处理。继续看最后一个问题:

有新消息，有免打扰有新消息，无免打扰无新消息，有免打扰无新消息，无免打扰

正常思路和前面解释的一样，遍历以上四个场景，即:ifnew _ msg = = & # 82201”而静音= = & # 8221；1″

–显示小红点，显示请勿打扰图标

elseifnew _ msg = = & # 82211″而静音= = & # 8221；0″

–显示小红点，不显示请勿打扰图标

elseifnew _ msg = = & # 82210″而静音= = & # 8221；1″

–不显示小红点，显示请勿打扰图标

否则ifnew _ msg = = & # 82210″而静音= = & # 8221；0″

–不要显示小红点，也不要显示请勿打扰图标

如果有三个以上的条件，那么每个表达式的判断就会比较多，很麻烦。

第一，交互处理

在今天的方法中，使用Axure是一个不起眼的动作:触发事件，可能很少使用。

在任意某个元件上，添加一个事件，例如单击事件。这个事件只判断一个条件，例如如果有新消息就显示小红点，否则不显示。在另外一个元件上，重复1~2的步骤，处理其它条件判断。在中继器的每项加载事件里，分别触发新加的元件上的事件。

这样做的优点是:

顶层的事件处理逻辑简单每个条件单独判断，逻辑清晰

根据以上步骤，我们来看看如何处理最后一个问题:

1)在任何组件上，添加一个事件，如click事件

为了不影响现有的内容，我经常添加一个热区组件，因为它在界面中是不可见的，同时阻止它响应鼠标事件，并隐藏它，这样它根本不会影响我们的界面操作。

2)此事件只判断一个条件，比如有新消息，会显示小红点，否则不显示

添加一个点击事件，也可以添加一个双击事件，然后触发这个事件。事件，如果等于1，则显示小红点，否则隐藏。

3)在另一个组件上，重复步骤1~2以处理其他条件判断

同样，添加了另一个热区组件来处理静音判断。

4)在中继器的每个加载事件中，分别触发新添加元素上的事件

回到中继器的每个加载事件，并简化其原始事件处理。

只有设定文本和两个触发事件，在触发事件内部进行逻辑判断。因为复读机的逻辑是可以实时看到的，看预览效果。

实际预览效果:

检查数据，看它是否符合给定的条件:

第一个显示新消息，显示免打扰图标(new_msg=1,mute=1)。第二个都不显示(new_msg=0,mute=0)。第三个只显示免打扰(new_msg=0,mute=1)。第四个只显示新消息(new_msg=1,mute=0)。

是不是处理的比较优雅？

如果有第三个条件，只需添加一个热区，点击事件处理，然后触发其事件即可。

二.总结

事件触发就像一个函数调用，给另一个元素添加逻辑，然后触发它。这种方法的优点是逻辑简单，思路清晰。

一定要试一试~