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

Question

目前我对整个项目(加上包含的库)使用单个 .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/class 冲突。避免这些问题并仍然保持 JavaScript 和 HTML 代码易于维护的最佳做法是什么？

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

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>
   

   但是，我觉得这也不是最好的解决方案。

你能想到另一个/更好的解决方案吗？

Answer 1

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

将您的 View 分成小部件(想想插件)。如果您的应用程序中有模型，请将它们的声明与主 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,