重構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語句或查找表，除非您真的很在意減小腳本大小。 只有在這種情況下，您才能考慮我非常專業的方法。