4

我制作了一个重 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
    });
});

ad infinitum 有一些函数和原型的东西，以获得我需要的经常重复的功能。它工作得很好，但我知道这是不对的，而且看起来真的很丑。最重要的是，将大部分内容包装在 a 中似乎很糟糕，并且在$(document).ready()不使用文本编辑器的查找功能的情况下尝试对代码进行排序并找到我想要的部分是很痛苦的。

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

帮助我逃脱厄运的事件处理程序！

4

1 回答 1

0

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

$("#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/

于 2015-04-15T23:10:30.717 回答