我正在寻找有关组织代码的最佳方式的建议。我有很多 jQuery 事件句柄用于:
- 下拉菜单、标签等
- 表单验证
- $.ajax 获取动态表单请求
<options>
的 - $.ajax post 表单提交请求。
像 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
那是众多事件监听器之一。关于如何组织这个有什么建议吗?
最佳答案
我会使用以下结构。只需在 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();
})();
在这里 fiddle :http://jsfiddle.net/chrispickford/LQr2B/
关于javascript - jQuery 事件处理程序组织,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19398890/