Javascriptデータ属性の関数名でコールバック

Question

フォームの "data-apply"属性の下に関数名が保存されるajax呼び出しのコールバック関数を提供しようとしています。

jQuery(function($) { 
    $('form[data-async]').on('submit', function(event) { 
     var $form = $(this); 
     var $target = $($form.attr('data-target')); 
     var apply = $form.attr('data-apply'); 
     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 

      success: function(data, status) { 
       var callBackFunc = new Function(apply); 
       callBackFunc.call(); 
      } 
     }); 

     event.preventDefault(); 
    }); 
}); 

function addBubble(){ 
    alert('a'); 
} 

形式：

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble();" action="/some/action/performed" method="POST"> 

私はeval()は、セキュリティとパフォーマンスの問題を紹介するかもしれないので、この場合にはeval()を使用しないようにしたいです。確かにFunction()がより安全な方法であるか、これを処理する全く異なる方法があります。

違いがある状況を処理するために関数コールバックを渡すにはどうしてですか？関数がグローバルに定義されているので、あなたがwindowオブジェクトを通してそれを呼び出すことができますhttps://gist.github.com/havvg/3226804

Answer 1

：

元のコード

から借りました。

window["functionName"].call(); 

addBubble

<form id="111" class="form-horizontal " data-async data-target="#rating-modal" data-apply="addBubble" action="/some/action/performed" method="POST"> 

から括弧を外しJavascriptを

jQuery(function($) { 
    $('form[data-async]').on('submit', function(event) { 
     var $form = $(this); 
     var $target = $($form.attr('data-target')); 
     var apply = $form.attr('data-apply'); 
     $.ajax({ 
      type: $form.attr('method'), 
      url: $form.attr('action'), 
      data: $form.serialize(), 

      success: function(data, status) { 
       if(typeof window[apply] == "function") 
        window[apply].call(); //window[apply](); or window[apply].apply(); will work too 
      } 
     }); 

     event.preventDefault(); 
    }); 
}); 

function addBubble(){ 
    alert('a'); 
} 

Answer 2

機能を使用すると、コールバックを呼び出すためにwindow[$form.attr('data-apply')]()を使用することができ（すなわちwindowオブジェクトで）グローバルに定義されている場合。 ()を削除する必要があることに注意してください。data-apply