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

Question

在为 onClick 属性定义 value 时，我们知道如下语法:

<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>

我感兴趣的是定义一个自定义数据属性并按如下方式执行该值:

<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()
    }
});

演示:Fiddle

注意:确保它在您的环境中是安全的，即不会因为用户输入错误而导致脚本注入(inject)

• Why is using the JavaScript eval function a bad idea?
• When is JavaScript's eval() not evil?
• eval() isn’t evil, just misunderstood
• Eval is Evil, Part One