您会使用哪种模式来解决这种表达式？

Question

我有多个状态和多个值，好吧，我可以使用一个函数，else if 逻辑，但想知道您对哪种设计模式或实现更适合这种推理的看法：

item.status == 'upcoming' ? 
     'label-upcoming' : 
        ( item.type == 'ticket_required' && 
            item.status == 'available' && 
              item.hasTicket == true ? 
                 'label-ticket' : '')

我不想要解决方案，只是学习一些技术。提前致谢

Answer 1

这很紧凑但难以阅读，为了便于维护，我更喜欢“if-else”。

Answer 2

由于您在此处为 item.status 合并了多个条件，因此立即查找的对象文字可能会很方便：

({
  'upcoming': 'label-upcoming',
  'available': item.type == 'ticket_required' && item.hasTicket && 'label-ticket'
}[item.status] || '')

（虽然在这种情况下它非常难看，因为对象内部有一个复杂的表达式，即使未选择键也必须每次都对其进行评估，并且从那里默认为 ''很难理解）。尽管如此，您应该知道这是一种模式 :-) 为了提高性能，请将对象文字放在静态位置以避免创建新对象。如果你需要它更灵活，输入函数而不是键：

// Using ES6 syntax for conciseness, works with ES5 function expression just as well
const lookup = {
  'upcoming': (_) => 'label-upcoming',
  'available': (item) => item.type == 'ticket_required' && item.hasTicket ? 'label-ticket' : ''
};

… (lookup[item.status] || (_)=>'')(item) …

当然，您始终可以使用 IIFE：

… (function() {
    switch(item.status) {
        case 'upcoming':  return 'label-upcoming';
        case 'available': if (item.type == 'ticket_required' && item.hasTicket)
                              return 'label-ticket';
        default: return '';
    }
}()) …

您会使用哪种模式来解决这种表达式？

Which pattern would you use to solve that kind of expression?

javascript

design-patterns