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

Posted 2023-02-23

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

【英文标题】：Giant file full of event handlers! How to organize a large jQuery file in an AJAX web app?

【发布时间】：2013-06-05 03:47:05

【问题描述】：

我制作了一个重 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 框架。命名空间是答案/它们真的会帮助什么吗？我做了一些研究，除了命名空间之外没有发现什么......这让我很惊讶/沮丧。

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

【问题讨论】：

更多信息：我正在使用 Laravel 并且已经设置了后端来处理所有请求/传回数据。似乎我的 JS 文件只是一个触发 AJAX 请求然后操作的地方DOM 作为响应。一定有更好的办法……

【参考方案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/