调用对象中定义的函数

Question

我有一个对象，它定义了要在页面元素的click事件中调用的函数的名称和参数。

object_array = [
    {
       id: "id1",
       onclick: "load_file(filename.php);",
    },

    {
       id: "id2",
       onclick: "open_url('http://url.com');",
    }
];

必须动态检索该信息。 我想在click事件中为数组中的给定对象调用onclick函数。

$('element').click(function() {
      // call object.onclick
});

似乎eval（）不是一个好的选择。 是否有不同的方式来调用该功能？

Answer 1

这是一个工作的jsfiddle： http ： //jsfiddle.net/Zh6Fv/1/

像这样：

 object_array = [
        {
           id: "id1",
           // Encapsulate in an anonymous function
           onclick: function(){ load_file('filename.php'); },
        },
        {
           id: "id2",
           // Encapsulate in an anonymous function
           onclick: function(){ open_url('http://url.com'); },
        }
    ];

然后实际绑定它像这样::

$('element').click(obj.onclick);

想必你会像这样使用它::

object_array.forEach(function(obj){
     // Note there is no need to wrap the obj.onclick
     // into another anonymous function anymore!
     $("#" + obj.id).click(obj.onclick);
});

这是一个工作的jsfiddle： http ： //jsfiddle.net/Zh6Fv/1/

Answer 2

你应该将object_array重构为：

[{
    id: "id1",
    action: "load_file",
    url: "filename.php"
}, {
   id: "id2",
   action: "open_url",
   url: 'http://url.com'
}];

然后你可以用：

var actions = {
    load_file: function(url) {
        ...
    },
    open_url: function(url) {
        ...
    },
    ...
};
object_array.forEach(function(ob) {
    $("#"+ob.id).click(function() {
        actions[ob.action](ob.url);
    });
});

如果你有更复杂的参数，你也可以传递一个arguments数组而不是url并在函数上使用apply() 。

---

或者，如果您只想要一个函数查找表，请使用：

var object = {
    "id1": function() {
        load_file('filename.php');
    },
    "id2": function() {
        open_url('http://url.com');
    }
};
$('element').click(function() {
    object[this.id]();
});

Answer 3

你可以声明一个像这样的函数

onclick : function()
{
   action(arguments);
}