javascript - オブジェクトで定義された呼び出し関数

Question

ページ要素のクリックイベントで呼び出される関数の名前とパラメーターを定義するオブジェクトがあります。

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

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

その情報は動的に取得する必要があります。クリックイベントで、配列内の特定のオブジェクトに対して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);
    });
});

より複雑な引数がある場合は、関数の代わりに引数配列を提供して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);
}