javascript - 如果方法在 jQuery 的数组中可用，则执行函数

Question

我正在尝试找到一种更好的方法来编写一段 jQuery，但我自己想不出来。

$('.ajaxButton').click(function(event) {

    event.preventDefault();

    var button = $(this).data('button');
    var action = $(this).data('buttonaction');
    var target = $(this).data('buttontarget');

    // The following code needs a rewrite
    if (action === 'fadeIn') {
        $(target).fadeIn();
    } else if (action === 'slideDown') {
        $(target).slideDown();      
    } else if (action === 'fadeToggle') {
        $(target).fadeToggle();     
    } else if (action === 'slideToggle') {
        $(target).slideToggle();        
    } else {
        console.log('Action not found for ' + button + ' button.');
    }


});

为了避免不得不一遍又一遍地编写相同的代码，我为我在我的网络应用程序中创建的按钮编写了上面的 JS。上面的代码适用于以下 anchor :

<a href="#" 
    class="button ajaxButton" 
    data-button="showForm"
    data-buttonaction="slideToggle"
    data-buttontarget=".showForm" >...</a>

我一直想知道是否有更好的方法来编写以下代码:

if (action === 'fadeIn') {
    $(target).fadeIn();
} else if (action === 'slideDown') {
    $(target).slideDown();      
} else if (action === 'fadeToggle') {
    $(target).fadeToggle();     
} else if (action === 'slideToggle') {
    $(target).slideToggle();        
} else {
    console.log('Action not found for ' + button + ' button.');
}

我想避免使用 if:else 语句。我的第一直觉是拥有某种包含所有可能操作的数组。从那里，我执行一个简单的 if action is in array do...。

var actionArray = new Array('fadeIn', 'slideDown'...);

if ($.inArray(action, actionArray)) {
    $(target).action();
}

但我不知道如何创建函数。我可以根据数组值调用函数吗？或者我可以将字符串转换为函数吗？我想我能找到的最接近的是使用 eval()功能。

有更好的方法吗？或者我必须使用 if else 语句吗？

Answer 1

您可以使用括号表示法 (obj['prop']) 而不是点表示法 (obj.prop) 来定位对象中的属性。所以你可以这样做:

const validActions = ['fadeIn', 'slideDown'];

function doSomethingWithTarget(target, something) {
  if (validActions.includes(something)) {
    target[something]();
  }
}

doSomethingWithTarget($('#element'), 'slideDown'); // $('#element').slideDown();

更多信息: Working with objects @MDN , Property accessors @MDN