问附加JavaScript事件(对于大型web项目)的最佳实践是什么？

EN

正如您所说，解决方案1对于HTTP往返并不特别有效，但是如果您正在开发一个内部应用程序，您可能会选择忽略这个问题。

解决方案2看起来就像内联事件处理程序注册的一种迂回方式。

我使用的模式是一个JS文件，它有我想要作为一个特定于项目的“库”重用的任何代码--很少有足够的代码来分割它。并且每个服务器端代码单元都有一个JS文件-- MVC控制器、独立的Wicket控件--只实现特定于页面的行为，或者连接到可重用的代码。此文件通常以控制器的名称命名。

优点：

• 有明确的关联JS行为会发生在哪里
• 您可以删除页面中的内联Javascript --我不喜欢它，因为它使设置JS断点成为一项烦琐的工作。
• 如果将JS库组合在一起，则在任何给定页上只包含2-3个脚本文件，其中没有在每个页面上重用其中的一个脚本文件。
• 冲突的风险较小，因为选择器太宽，可能匹配不同页面上的元素，而不是预期的，并将意外的行为附加到它们上。
• JS代码仍然相当简单--包括在页面中的脚本。不需要设计模块结构。

一个可能的缺点是某些代码可能在特定于页面的脚本之间重复，但这是将机制与策略分离的成本。对于设置jQuery UI按钮或选择的选择框等琐碎代码来说，这种情况大多发生在我身上；因为它们共享一个共同的主题，所以我的解决方案是将它们合并到一个单独的JS文件中，以进行"ui增强“。

您还可以考虑将细粒度、可维护的javascripts合并为更容易加载的工具，作为构建步骤；对于性能提高很重要的大型项目，维护这一点的工作可能不会太费劲。具体情况取决于您的其他工具是什么，回退解决方案可以像调用jsmin命令行版本的calls脚本一样简单。

这是一个经典的代码结构问题。

将视图分离为小部件(比如插件)。如果应用程序中有模型，请将它们的声明从主onReady事件中分离出来，在模型中触发事件，并允许UI小部件与模型交互。

大多数情况下，分离您的文件以便：*对您的工作有一个更清晰的视图*分离的关注点，并且只公开所需的内容。

例如，考虑到与文件中的位置无关的内容。如果您使用没有在文件中声明的变量，请考虑您已经破坏了关注点分离的原则。

例如：

var myModel = function () {/**...**/};
var myModel.prototype.save = function () {/**...**/}

var myUIElt = function (model) {
  this.render(); //Do whatever required
  this.bind('onchange', function() { model.update();});
};

这样，在您的onReady回调中，您将拥有：

$(function() { var elt = new myUIElt(); }); // Much cleaner, huh ? ;)

在现实世界中，事情可能会更复杂一些，但主要的想法是上面的想法。

不要犹豫想要更多的细节，

HTH，

您可以在模块中组织代码，并在每个模块中定义init函数。

然后，只有在当前加载的页面上存在需要的元素时，才调用moduleName.init()函数

就像这样

var homePageModule = {
  init: function() {
    $('#an_element_on_homepage').click(function() {

    });
    anotherFunction();

  },
  anotherFunction: function() {
    //do something
  }
}; 
   //check for elements
    $(function() { 
      if ($('#an_element_on_homepage').length) {
        homePageModule.init();
      }
    });

P.S.：或者使用类并相应地实例化它们以使元素存在