将javascript函数作为data-*属性传递并执行

Question

在定义valuefor onClick属性时,我们知道如下语法:

<button type="submit" onclick="alert('hi');"></button>
<button type="submit" onclick="doWork"></button> <!-- This one doesn't work -->
<button type="submit" onclick="doWork()"></button>
<button type="submit" onclick="doWork('Mike', 2)"></button>

我感兴趣的是定义一个自定义data-attribute并执行如下值:

<button type="submit" data-callback="alert('hi');"      class="marker"></button>
<button type="submit" data-callback="doWork"            class="marker"></button>
<button type="submit" data-callback="doWork()"          class="marker"></button>
<button type="submit" data-callback="doWork('Mike', 2)" class="marker"></button>

<script type="text/javascript">
    jQuery("body").on("click","button.marker", function(e) {
        var callback = jQuery(e.currentTarget).data("callback");

        // Now I need to execute the callback no matter of the format
        // 1. Execute as function's body
        // 2. Or by function 'name'
        // 3. Or by function 'name' with 0 parameters
        // 4. Or by function 'name' with n parameters
    })

    function doWork(name, nr){
        var personName = name || "Unnamed";
        var personNr = nr || 0;
        alert("Name is: " + personName + " Nr: " + personNr);
    }
</script>

我已将样本粘贴到jsBin

如何使用自定义数据属性完成相同的行为？

Answer 1

一种方法是使用eval()

jQuery(".container").on("click", "button.marker", function (e) {
    var callback = jQuery(e.currentTarget).data("callback");

    var x = eval(callback)
    if (typeof x == 'function') {
        x()
    }
});

演示:小提琴

注意:确保它在您的环境中是安全的,即由于用户输入错误而无法注入脚本

• 为什么使用JavaScript eval函数是一个坏主意？
• 什么时候JavaScript的eval()不是邪恶的？
• eval()不是邪恶的,只是被误解了
• Eval是邪恶,第一部分

Answer 2

我认为更好的想法是动态绑定事件并触发它们.如果您希望它们仅为其他代码所知,则可以使用自定义事件.

<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>

<script>
    var $markers = $('.marker');
    $markers.filter('.marker1').bind('customCallback', function(){ alert("hi"); });
    $markers.filter('.marker2').bind('customCallback', function(){ doWork(); });
</script>

然后你的其他组件可以使用$(selector).trigger('customCallback')调用它们;

Answer 3

只需:

 $("body").on("click","button.marker", function(e) {
     eval($(this).data("callback"));
 })

Answer 4

如果您真的想将功能（带有或不带有参数）从一件事传递到另一件事而又不将它们绑定为事件，那么您可以通过这种方式做到这一点（我从@Taplar的回答开始）

<button type="submit" class="marker marker1"></button>
<button type="submit" class="marker marker2"></button>
<button type="submit" class="marker marker3"></button>
<button type="submit" class="marker marker4"></button>

<script>
  var $markers = $('.marker');
  $markers.filter('.marker1').get(0).customCallback =  doWork;
  $markers.filter('.marker2').get(0).customCallback = function(){ 
    doWork(arg0,arg1); 
  };
</script>

然后，您可以通过以下方式在其他组件中访问它们：

<script>
  $('.marker').each(function(){
    var  thisFunction = $(this).get(0).customCallback;
    //do something useful with thisFunction
  });
</script>