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/

jQuery事件处理程序组织

1 个答案: