javascript - 执行从ajax调用返回的js时避免eval

Question

我想进行一个将返回 json 对象的 ajax 调用。此 JSON 对象的属性之一将是要在客户端中执行的函数的字符串。我意识到这可以通过使用 eval 轻松解决，但看到 many disadvantages eval，我宁愿避免它。我的问题是:

我可以通过某种方式从服务器返回一些 js 代码并执行它而不求助于 eval 吗？

根据要求，这里有一些示例代码:

服务器(Node.js):

var testFunc = function() {
    alert('h1');
};

app.get('/testPack', function(req, res) {
    var template = jade.render('h1 hi');
    res.send({
        template : template,
        entity : testFunc.toString(),
        data : { 
            id: "OMG I love this"
        }
    });
});

客户:

$(document).ready(function() {
    $.ajax({
        url: '/testPack',
        success: function(data) {
            $('body').append($(data.template))
            alert(data.data.id);
            var entity = eval(data.entity);
            entity();
        }
    })
})

当然，调用实体的返回函数不会做这种傻事，它会公开返回的小部件的 API。

澄清一下，我想避免必须单独调用 javascript 本身。我宁愿将它与要呈现的模板和数据捆绑在一起。

Answer 1

最简单的方法不是通过 ajax 调用服务器，而是在页面上创建一个新的脚本标记，其 url 指向将输出纯 JavaScript(而非 JSON)的 RESTful 网络服务。这样，您的输出将由浏览器直接评估，而无需使用 eval。

稍微扩展一下我的回答:要解决在全局上下文中运行脚本的问题，您可以采取一些技巧。例如，当您将脚本标签添加到头部时，您可以将 onload 事件(或者更确切地说是伪造的 onload 事件，因为 IE 不支持脚本标签上的 onload)绑定(bind)到它，并且如果您来自服务器的响应将始终包装在具有已知名称的函数中，您可以从对象中应用该函数。下面的示例代码(虽然这只是一个示例):

function test ()
{
    this.init = function ()
    {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.language = "javascript";
        script.src = "test.js";
        var me = this;
        window.callMe = function () { me.scriptReady(me); };
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(script);
    };

    this.scriptReady = function (object)
    {
        serverResponse.call(object);
    };

    this.name = "From inside the object";

    this.init();
}

var t=new test();

服务器响应应该是这样的:

function serverResponse()
{
    alert(this.name);
}

window.callMe();

在这种情况下，serverResponse() 中的所有内容都将使用您的对象作为“this”。现在，如果您以这种方式修改服务器响应:

function serverResponse()
{
    this.serverJSONString = { "testVar1": "1", "testVar2": 2 };

    function Test()
    {
        alert("From the server");
    }

    Test();
}

window.callMe();

您可以从服务器返回多个内容，并且只有一个响应。如果您不喜欢只设置变量，则在您的主对象中创建一个函数来处理您可以通过从响应中调用此函数来提供的 JSON 字符串。

如您所见，这一切都是可行的，它看起来确实不漂亮，但话又说回来，您尝试做的事情一开始并不漂亮。

附言仅在标签内插入字符串对 IE 不起作用，它不允许您这样做。如果您不必支持 IE，那么您只需将服务器响应插入到新创建的脚本标记中就可以了。

附言请不要按原样使用此代码，因为我没有花太多时间编写它。它丑得要死，但只是举个例子:-)