jQuery 事件处理程序组织

Question

我正在寻找有关组织代码的最佳方式的建议。我有很多 jQuery 事件句柄用于：

• 下拉菜单、标签等
• 表单验证
• $.ajax 获取动态表单<options>的请求
• $.ajax 发布表单提交请求。

像backbonejs 这样的MVC 框架似乎有点过头了，但我当前的代码不可维护，并且会继续变得更糟，除非我给它某种结构。

$('#detailsform').find('.field').on('click','.save',function(){
    var input = $(this).siblings().find('input');
    input.attr('type','hidden');
    $(this).siblings().find('p').text(input.val());
    $(this).text('Change').addClass('change').removeClass('save');
    url = null; //query str

    $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });
});
//next event listener 
//next event listener 
//next event listener 
//next event listener 

这是众多事件监听器之一。关于如何组织这个有什么建议吗？

Answer 1

我会使用以下结构。只需在 eventHandlers 数组中为您需要的每个元素添加更多对象。这甚至可以通过编程方式完成。

(function() {
    var Site = {
        init: function() {
            this.bindEventHandlers();
        },
        bindEventHandlers: function() {
            for (var i=0; i<this.eventHandlers.length; i++) {
                this.bindEvent(this.eventHandlers[i]);
            }
        },
        bindEvent: function(e) {
            e.$el.on(e.event, e.handler);
            console.log('Bound ' + e.event + ' handler for', e.$el);
        },
        eventHandlers: [
            {
                $el: $('#element1'),
                event: "click",
                handler: function() { console.log('Clicked',$(this)) }
            },
            {
                $el: $('#element2'),
                event: "click",
                handler: function() { console.log('Clicked',$(this)) }
            }
        ]
    };

    Site.init();
})();

在这里提琴：http://jsfiddle.net/chrispickford/LQr2B/