Question

我最近一直在将Phonegap升级到最新版本，现在它迫使我遵循Chrome的内容安全政策，这在某种程度上是好的。但是现在我被迫删除了HTML代码中的所有 onclick 处理程序，并将它们添加到jquery处理程序中的一些$（document）.ready（function（evt）{

$('#addRecordBtn').on('click', function(){
    alert("Adding Record");
    AddValueToDB();
});

$('#refreshBtn').on('click', function(){
    alert("Refresh Records");
    ListDBValues();
});

});

但是根据我的应用程序的扩展程度，我觉得这些处理程序会有太多。是否有一个示例显示了这些处理程序的维护以及定义此类处理程序的正确方法或适当位置。

Answer 1

这是一个想法。您可以创建一个对象来存储所有也知道如何放弃函数的函数

var handlers = {
    getHandler: function (str) {
        return this[str];
    },
    '#addRecordBtn': function () {
        alert("Adding Record");
        AddValueToDB();
    },
    '#refreshBtn': function () {
        alert("Refresh Records");
        ListDBValues();
    } 
};

然后使用此表单应用所有处理程序。

$('#addRecordBtn').on('click', handlers.getHandler('#addRecordBtn'));
$('#refreshBtn').on('click', handlers.getHandler('#refreshBtn'));

优化时间如果您想要真正的想象，并为每个按钮分配一个唯一的ID作为约定

var handlers = {
    defer: function () {
        return function (){
            handlers[$(this).attr('id')](arguments);
        };
    },
    registerHandlers: function () {
        for (var key in this) {
            if (this.hasOwnProperty(key) && typeof(key) === "string") {
                $('#' + key).on('click', this.defer());
            }
        } 
    },
    'addRecordBtn': function () {
        alert("Adding Record");
        AddValueToDB();
    },
    'refreshBtn': function () {
        alert("Refresh Records");
        ListDBValues();
    } 
};

用

调用它

$('#addRecordBtn').on('click', handlers.defer());
$('#refreshBtn').on('click', handlers.defer());

或自动注册所有内容

handlers.registerHandlers();

Here is a fiddle of my solution

Answer 2

你找这样的东西吗？

$('[data-clickhandler]').on('click', function(e) {
    var $btn = $(e.currentTarget);
    var handler = $btn.data('clickhandler');

    alert('Refresh ' + handler);
    window[handler] && window[handler](e);
    e.preventDefault();
});

现在你的元素可以像这样指定他们的clickhandler：

<a data-clickhandler="AddValueToDB" href="">...</a>

左右：

<span data-clickhandler="ListDBValues">...</span>

在click jquery处理程序上管理和维护太多

2 个答案: