写一堆If Else语句的更枯燥的方式

Question

我有一个变量placement，可以设置为以下值：顶部、左上角、右上角、底部、左下角、右下角、右侧、右侧顶部、右侧底部、左侧顶部、左侧顶部和左侧底部。

我有另一个变量const trigger = triggerRef.current.getBoundingClientRect();，所以我可以确定触发元素在哪里，并在此基础上相应地设置placement变量。

我目前使用了很多if else语句。例如：

if (placement === "top" && trigger.top < 75 && windowWidth - trigger.right > 75 && trigger.left > 175) 
{ placement = "bottom";
} else if ( placement === "top" && windowWidth - trigger.right < 75 &&  windowHeight - trigger.bottom > 75 && trigger.top < 75) 
{ placement = "left-top"; }
...and the code goes on and on

什么是"；DRY er"；这样做的方式？

Answer 1

合并这些测试中的逻辑，只检查一次。如果不是重复相同的计算，则指定一个变量：

if (placement === "top" && trigger.top < 75 ) {
const triggerFromWidth = windowWidth - trigger.right;
if (triggerFromWidth > 75 && trigger.left > 175) { 
placement = "bottom";
} else if (triggerFromWidth < 75 && windowHeight - trigger.bottom > 75) { 
placement = "left-top"; 
}
}