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

Stack Overflow用户

提问于 2011-10-18 04:12:32

回答 4查看 274关注 0票数 1

目前，我正在整个项目中使用一个.js文件(加上包含的库)。只是偶尔我会将文件分割成多个文件(即前端和后端部分)。在文件中，我使用jQuery选择器在单个ready事件处理程序中附加事件(和其他功能)：

$(document).ready(function() {

   $('#an_element_on_homepage').click(function() {
      // do something
   });

   // ...
   // A lot of similar code here
   // ...

   $('.elements_on_homepage_and_contact_page').click(function() {
      // do something
   });
});

这是完全可行的，但是在一个更大的项目上，可能会有大量不必要的代码执行，因为某些事件只需要在特定的页面上执行，或者在不同的页面之间可能会发生id/class冲突。避免问题并仍然保持JavaScript和HTML代码易于维护性的最佳实践是什么？

我能想到两种解决方案：

将.js文件拆分为多个文件，并在每个页面上只选择所需的文件。但是，很难正确分发事件附件，并且可能会在客户端缓存脚本时出现问题。
将事件附件包装在函数中，并仅在需要时从HTML代码中调用它们。类似于：函数attachClickOnElementOnHomepage() {$(‘#an_element_on_homepage’).click(函数(){ // do })；} 然后在HTML中：

你能想出另一个/更好的解决办法吗？

jquery

html

javascript

1元体验云点播

覆盖建站/短视频等热门场景，提供媒资管理、短视频 SDK、小程序插件和播放器云+端一体化能力，助您抓住视频风口

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-10-18 04:39:52

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

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

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

优点：

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

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

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

票数 1

Stack Overflow用户

发布于 2011-10-18 04:52:35

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

将视图分离为小部件(比如插件)。如果应用程序中有模型，请将它们的声明从主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，

票数 2

Stack Overflow用户

发布于 2011-10-18 04:44:36

您可以在模块中组织代码，并在每个模块中定义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();
      }
    });