if判断哪种写法更优？

Question

如下代码哪种写法更好:
写法1：

const drawercStyle = {
    width: (show ? '100%' : '0')
}
const maskStyle = {
    width: (show? '100%' : '0'),
    opacity: (show ? '1' : '0')
}

写法2：

if(show){
    drawercStyle = {
        width: 100%
    }
    maskStyle = {
        opacity: 1
    }
}
else{
    drawercStyle = {
        width: 0
    }
    maskStyle = {
        opacity: 0
    }
}

Answer 1

如果是我写的话

const [drawercStyle, maskStyle] = show ? [{width: '100%'}, {opacity: 1}] : [{width: 0}, {opacity: 0}]

其实都区别不大 看个人习惯了

Answer 2

可能跑题了，相比 if-else 更优雅的方式不应该是使用策略模式吗？如果只是在 if-else 和三目上面纠结，我觉的无所谓吧，萝卜青菜各有所爱。

Answer 3

下面一种吧，没有那么多的条件判断

Answer 4

能用三目就三目吧，越简洁越好维护

Answer 5

仅仅看你这两种，感觉写法2好点吧，可读性高一点，而且判断少一点

Answer 6

没必要那么在意，这种时候就应该哪种简洁用哪种。机器累点总优于人力成本。

Answer 7

做成配置的，后面好扩展

width = {
    hide: 0,
    show: 100%
}
opacity = {
    show: 1,
    hide: 0
}
height = {
    hide: 0,
    show: 100%
}
const drawercStyle = {
    width: width['show']
}
const maskStyle = {
    width: width['show']
    opacity: opacity['show']
}

Answer 8

三元运算符不需要用括号啊