javascript - 如何避免嵌套切换？

Question

我正在用 JavaScript 为网络应用程序创建上下文菜单。菜单可以出现在许多上下文中，并有不同的选择。我可以为每个上下文/选择使用不同的函数:

grid1_delete()
grid1_duplicate()
grid2_delete()
grid2_add()
grid2_duplicate()

并在构建菜单时对它们进行硬编码。我不喜欢的是可能会有很多重复的代码。所以我在考虑使用调度程序函数，但它会导致潜在的长嵌套 switch 语句:

function contextMenuClick(context, menuItem) {
    var action = menuItem.innerHTML;
    switch (context) {
        case 'grid1':
            switch(action) {
                 case('delete'):
                      // do delete for grid1
                      break;
                 case('duplicate'):
                      // do duplicate for grid1
                      break;
                 default:
                      console.log('undefined action in contextMenuClick/grid1: ' + context);
            }
            break;
        case 'grid2':
            switch(action) {
                 case('add'):
                      // do add for grid2
                      break;
                 case('delete'):
                      // do delete for grid2
                      break;
                 case('duplicate'):
                      // do duplicate for grid2
                      break;
                 default:
                      console.log('undefined action in contextMenuClick/grid2: ' + context);
            }
            break;
        default:
            console.log('undefined context in contextMenuClick: ' + context);
        }

哎呀。必须有更好的方法。也许调度员带来的麻烦多于它的值(value)。我看过一些 the related posts ，但我不太明白如何将它们应用于这种确切情况。

Answer 1

在 Javascript 中很少需要 Switch 语句。通常，您可以只使用字典/ map 等对象并直接进行查找:foo.bar 等同于 foo['bar']。

另外，对于“全局”变量，some_global_func()等同于window.some_global_func()，也可以写成var f = ' some_global_func'; window[f]():您永远不需要eval 来选择一个变量或根据它的名称动态调用一个函数。不过，一般来说，在这样做时，您应该更愿意将函数存储在一个对象中，而不是在全局范围内(即在 window 对象中)。

因此，假设 grid1_delete 和 grid2_delete 根本不同并且不能组合成通用函数，您可以执行类似以下的操作而无需过多更改代码:

var grid_actions = {
    'grid1': {
        'delete': function() { /* ... */ },
        'duplicate': function() { /* ... */ }
    },
    'grid2': {
        'delete': function() { /* ... */ },
        'add': function() { /* ... */ },
        'duplicate': function() { /* ... */ }
    }
}

function contextMenuClick(context, menuItem) {
    var action = menuItem.innerHtml;
    if (context in grid_actions) {
        if (action in grid_actions[context]) {
            grid_actions[context][action]();
        } else {
            console.log('undefined action in contextMenuClick/' + context + ': ' + action);
        }
    } else {
        console.log('undefined context in contextMenuClick: ' + context);
    }
}

不过，更好的解决方案是重构事物，使这些函数成为每个上下文的对象方法，例如 @ le dorfier建议。