Javascript 通过数据属性中的函数名回调

Question

我正在尝试为 ajax 调用提供回调函数，其中函数名称保存在表单的“data-apply”属性下。

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() 是更安全的方法还是有完全不同的方法来处理这个问题。

那么有没有传入一个回调函数来处理不同的情况呢？

原代码借自:https://gist.github.com/havvg/3226804

Answer 1

由于该函数是全局定义的，您可以通过window 对象调用它。

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