javascript - 我应该如何处理将特定页面事件绑定到可重用 DOM？

Question

我的应用程序具有跨多个页面重用的代码。假设我有这个：

+ page_A.html
  - includes partial_1.html
+ page_B.html
  - includes partial_1.html

现在，partial_1.html 中的 DOM 元素具有与之关联的 JavaScript 事件。这些可以分为两类：

• 无论使用哪个页面都必须绑定的事件（类型 I）
• 必须以不同方式绑定的事件，具体取决于呈现部分的页面（类型 II）

我组织它的方式是这样的：

• partial_1.html --> 用于模板
• partial_1.css --> 用于 CSS
• partial_1.js --> 用于模型/控制器和类型 I 绑定
  • partial_1__A --> 用于特定于页面 A 的类型 II 绑定
  • partial_1__B --> 用于特定于页面 B 的类型 II 绑定
  • 等等....

显然，如果有很多模板，这可能会让人厌烦。幸运的是，在这个阶段我只有两个，所以没什么大不了的。但是我想知道是否：

1. 有更好的方法来处理这个
2. 我可以利用一些现有的框架/库。backbone.js会为此提供某种机制吗？

Answer 1

我会使用 jquery 来绑定事件。

我还会将不同的绑定放在不同页面的代码中。

Answer 2

您想使用事件冒泡。假设这些 html 文件是部分文件并加载到现有元素中，您可以使用 jquery 的on方法。这样，每个事件您将只有一个事件处理程序，并且不必在加载新内容时绑定/取消绑定事件。