重构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 + "'!");
}

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

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 + "'!");

Answer 2

你有一个查找表的完美情况。您对名称有很多可能性，并且您对每个名称的操作只是一个或多个简单的函数调用。

这意味着您可以使用查找表。您将 name 的值作为键，并使用一组函数名称来调用该名称。表中的一次查找会为您提供一组要调用的函数，然后您循环遍历该数组以调用每个函数。这样做的好处是要添加更多项目，您只需在表格中添加一个新行，而无需编写任何额外的代码行：

var lookup = {
    "cms": [productenActive],
    "cebesFrame": [productenActive],
    "firstWatchOnline": [productenActive],
    "fireman": [productenActive],
    "firstwatch": [productenActive],
    "prio": [productenActive],
    "overOns/vacatures": [activeFour, overOnsActive],
    "overOns/partner":  [activeThree, overOnsActive],
    "overOns/cebes": [activeTwo, overOnsActive],
    "overOns": [activeOne, overOnsActive],
    "support/download": [activeThree, supportActive],
    "support/contact": [activeTwo, supportActive],
    "support": [activeOne, supportActive],
    "diensten/implementaties": [activeFive, diesntenActive],
    "diensten/opleidingen": [activeFour, dienstenActive],
    "dienstenout/outsourcing": [activeThree, dienstenActive],
    "diensten/maatwerk": [activeTwo, dienstenActive],
    "diensten/consultancy": [activeOne]
};

var fns = lookup[name];
if (fns) {
    for (var i = 0; i < fns.length; i++) {
        fns[i]();
    }
}

Answer 3

这是我的尝试。它不是最好的，因为它非常适合您的情况。但是，它确实提供了很多动态调用和代码重用。

var subPage = {
    'diensten' : ['consultancy', 'maatwerk', 'outsourcing', 'opleidingen', 'implementaties'],
    'support'  : [undefined, 'contact', 'download'],
    'overOns'  : [undefined, 'cebes', 'partner', 'vacatures'],
}
var others = ['fireman', 'prio', 'firstwatch', 'firstwatchOnline', 'cebesFrame', 'cms'];
var active = [activeOne, activeTwo, activeThree, activeFour, activeFive];

var addr = name.split('/');
if (subPage[addr[0]]){
    var index = subPage[addr[0]].indexOf(addr[1]);
    if (index != -1){
        active[index]();
        if (addr[1] !== 'consultancy') // Special case
            this[adder[0]+'Active'](); // Assuming this refers to the scope where diesntenActive() lives
    }
} else if (others.indexOf(addr[0]) != -1){
    productenActive();
}
return false;

无论如何，这可能会使事情过于复杂。我仍然建议您使用 switch 语句或查找表，除非您真的很关心减小脚本大小。只有在这种情况下，您才能考虑我非常专业的方法。