重构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语句或查找表，除非您真的很在意减小脚本大小。 只有在这种情况下，您才能考虑我非常专业的方法。