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

What is the best practice for attaching JavaScript events (for a large web project)?

本文关键字：最佳 是什么 项目 事件 JavaScript web 于大型 附加      更新时间：2023-09-26

目前我使用一个单一的.js文件为整个项目(加上包含的库)。只是偶尔我会将文件分割成多个文件(即前端和后端部分)。在文件中，我使用jQuery选择器在单个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/类冲突。避免这些问题并保持JavaScript和HTML代码易于维护性的最佳实践是什么?

我可以想到两个解决方案:

  1. 将.js文件拆分为多个文件，在每个页面上只选择需要的文件。但是，很难正确地分发事件附件，并且可能导致在客户端缓存脚本时出现问题。

  2. 将事件附件包装在函数中，并仅在需要时从HTML代码中调用它们。比如:

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

    在HTML中:

    <div id="an_element_on_homepage"></div>
<script type="text/javascript">attachClickOnElementOnHomepage();<script>

    然而，我有一种感觉这也不是最好的解决方案。

你能想到其他/更好的解决方案吗?

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

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

方案一。就像你说的，在HTTP往返方面不是特别有效，尽管如果你在做一个内部应用程序，你可能会选择忽略这个问题。

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

我使用的模式是一个JS文件，其中包含任何我想作为特定于项目的"库"重用的代码-很少有足够的代码来保证拆分它。每个服务器端代码单元(MVC控制器、独立Wicket控件)都有一个JS文件，它们只实现特定于页面的行为，或者连接到可重用代码。该文件通常以控制器命名。

的优点:

  • JS行为发生的明显关联
  • 你摆脱了页面中的内联Javascript -我不喜欢它，如果只是因为它使设置JS断点成为一件苦差事
  • 如果你组合你的JS库，你只包含2-3个脚本文件在任何给定的页面，其中只有一个是不被重用在每个单独的页面
  • 更少的冲突风险，选择器太宽可能匹配不同页面上的元素，而不是预期的，并附加意外的行为。
    • JS代码仍然相当简单——脚本包含在页面中。无需设计模块结构。

一个可能的缺点是某些代码可能在特定于页面的脚本之间重复，但这是将机制与策略分离的成本。这主要发生在我的琐碎代码，如设置jQuery UI按钮或选择的选择框;由于它们共享一个共同的主题，我的解决方案是将它们打包成一个单独的JS文件，用于"ui增强"。

你也可以看看工具，将细粒度的可维护的javascript脚本组合成更容易加载的，作为一个构建步骤;对于性能增益很重要的大型项目，维护它的努力可能不会多余。具体取决于您使用的其他工具，后备解决方案可以像调用命令行版本的jsmin的shellscript一样简单。

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

注::或者使用类并根据元素的存在来实例化它们

如果这是一个大型的web项目，那么我建议你使用Backbone

相关文章：