Gọi một chức năng dựa trên một chuỗi có chứa tên chức năng

Question

var foo1,foo2; 

switch (fn) 
{ 
    case "fade" : foo1 = "fadeOut"; foo2 = "fadeIn"; break;     
    case "slide" : foo1 = "slideUp"; foo2 = "slideDown"; break; 
} 

eval("$('.cls1')." + foo1 + "();"); 
currentSlideIndex = currentSlideIndex + n; 
eval("$('.cls1')." + foo2 + "();"); 

Bất kỳ cách nào tốt hơn để đạt được điều này mà không cần sử dụng eval? Im không phải là một fan hâm mộ rất lớn của việc sử dụng eval trừ khi hoàn toàn cần thiết.

Answer 1

Khi tên hàm lưu trữ trong foo1 và foo2 được thuộc tính của đối tượng được trả về bởi $('.cls1'), những điều sau đây sẽ hoạt động:

$('.cls1')[foo1](); 

Cùng với foo2.

Answer 2

$('.cls1')[foo1](); 
currentSlideIndex = currentSlideIndex + n; 
$('.cls1')[foo2](); 

Answer 3

Bạn không cần phải sử dụng eval, bạn chỉ có thể sử dụng các ký hiệu khung property accessor:

$('.cls1')[foo1](); 

Answer 4

Bạn có thể sử dụng cú pháp:

$('selector')[foo1](); 

Tuy nhiên cách tiếp cận khác để tự động gọi phương thức là tạo ra một phương pháp mới, đó deligates

(function() { 
    $.fn.someFunc = function(what) 
    { 
    switch(what) { 
     case 'fadeOut': 
     $(this).fadeOut(); 
     break; 
     // etc 
     default: 
     // handle an unknown value 
    } 
    } 
})(jQuery); 

$('.cls1').someFunc('fadeOut'); 

này sẽ cho phép bạn nhanh chóng kiểm soát những gì sẽ xảy ra thay vì truyền bất cứ thứ gì như foo1.

Answer 5

Bạn có thể sử dụng chiến lược này để phù hợp với nhu cầu của bạn:

function doFade() { 
    alert('fade'); 
} 

function doFadeIn() { 
    alert('fadeIn'); 
} 

var fns = { 
    'fade': doFade 
    , 'fadeIn', doFadeIn 
}; 

function callSomething(what) { 
    fns[what](); 
} 

// callSomething('fadeIn'); => alerts 'fadeIn'