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/