管理和维护太多点击 jquery 处理程序

Question

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

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

现在您的元素可以像这样指定它们的点击处理程序：

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

左右：

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

管理和维护太多点击 jquery 处理程序

Managing and Maintaining too many on click jquery handlers

html

javascript

jquery

google-chrome

content-security-policy