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语句或查找表，除非您真的非常关心减少脚本大小。只有在这种情况下，你可以考虑我的专业方法。

重构javascript函数

3 个答案: