Question

我已经制作了一个AJAX密集的Web应用程序，并将jQuery作为一个库来帮助促进DOM操作和AJAX请求等。这就是问题所在：

我的JavaScript文件是一个巨大的事件处理程序集合!!!!!

我是认真的，可能是30多个事件处理程序，我甚至不想数数。它基本上看起来像：

$(document).on('click', '#element', function() {
    $.get('url' + id, function(data) {
        //do stuff
    });
});

$('div.selector').hover(function() {
    //do stuff
}, function() {
    //undo stuff
});

$(document).on('submit', 'form#form-selector', function() {
    $.post('/url', $('form#form-selector').serializeObject(), function(data) {
        //do stuff
    });
});

无限广告，其中包含一些功能和原型，以获得我需要的常用功能。它工作得很好，但我知道这不可能是正确的，它看起来真的很难看。最重要的是，将大部分内容包装在$(document).ready()中似乎很糟糕，尝试对代码进行排序并找到我想要的部分而不使用文本编辑器的查找功能是很糟糕的。

你如何组织这样的大型项目？我知道像Backbone.js这样的东西，但我不确定这是否是预期的用例我已经在PHP中使用服务器端框架来进行模板和其他事情，所以我不需要完整的JavaScript框架。命名空间是答案/他们真的会帮助什么吗？我已经完成了一些研究，除了命名空间之外没有找到太多东西......让我感到惊讶/沮丧。

帮助我摆脱厄运事件的处理者！

Answer 1

您可以将触发相同事件的元素分组到一个组中。并按以下方式在单个事件函数中执行操作：

$("#b1,#b2").on("click",function(event){
 var target = event.target || event.srcElement;
 switch(target.id)
 {
    case "b1":
      alert("Im One");
    break;
    case "b2":
      alert("Im Two");
    break;
 }});

示例代码：http://codepen.io/tejzpr/pen/pvMxMw/

巨型文件充满了事件处理程序！如何在AJAX Web应用程序中组织大型jQuery文件？

1 个答案: