javascript - 重构 JavaScript 函数

Question

:) 我已经创建了一些 javascript，它运行良好，我的 javascript 知识限制了我创建一些紧凑且轻便的脚本。这是aspx框架的一些子菜单javascript，这里是脚本:

if (name === 'diensten/consultancy')
            {
                activeOne();
            }
    else if (name === 'diensten/maatwerk')
            {
                activeTwo();
                diesntenActive();
            }
    else if (name === 'diensten/outsourcing')
            {
                activeThree();
                diesntenActive();
            }
    else if (name === 'diensten/opleidingen')
            {
                activeFour();   
                diesntenActive();
            }
    else if (name === 'diensten/implementaties')
            {
                activeFive();
                diesntenActive();
            }
    else if (name === 'support')
            {
                activeOne();
                supportActive();
            }
    else if (name === 'support/contact')
            {
                activeTwo();
                supportActive();
            }
    else if (name === 'support/download')
            {
                activeThree();
                supportActive();
            }
    else if (name === 'overOns')
            {
                activeOne();
                overOnsActive()
            }
    else if (name === 'overOns/cebes')
            {
                activeTwo();
                overOnsActive()
            }
    else if (name === 'overOns/partner')
            {
                activeThree();
                overOnsActive();
            }
    else if (name === 'overOns/vacatures')
            {
                activeFour();
                overOnsActive();
            }
    else if (name === 'fireman')
            {
                productenActive();
            }
    else if (name === 'prio')
            {
                productenActive();
            }
    else if (name === 'firstwatch')
            {
                productenActive();
            }
    else if (name === 'firstwatchOnline')
            {
                productenActive();
            }
    else if (name === 'cebesFrame')
            {
                productenActive();
            }
    else if (name === 'cms')
            {
                productenActive();
            }   
    return false

我确信有一种方法可以缩短这个 javascript，不是太紧急，只是为了让我更多地了解 javascript。欢迎任何建议。谢谢。

Answer 1

首先是使用 switch 语句而不是长 if/else 树。

switch (name) {
  case 'diensten/consultancy': 
    activeOne (); 
    break;

  case 'diensten/maatwerk':
    activeTwo (); 
    diesntenActive (); 
    break;

  ...

  case 'cms':
    productActive (); 
    break;

  default:
    console.log ("No handler found for '" + name + "'!");
}

另一种方法是使用一个对象，您可以在其中定义函数并将它们关联到相关键。

var func_map = {
  'diensten/consultancy': function () {
    activeOne ();
  },

  'diensten/maatwerk': function () {
    activeTwo ();
    diesntenActive ();
  },

  'diensten/outsourcing': function () {
    activeThree();
    diesntenActive();
  },

  ...

  'cms': function () {
    productenActive();
  }
};

if (name in func_map) func_map[name] ();
else console.log ("No handler found for name = '" + name + "'!");