javascript - 如何处理或最小化 jquery 中的紧耦合

Question

描述

大多数 jquery 代码的设计都会导致很多紧耦合，例如选择器采用特定的 html 结构

var mySubnav = $("#navigation a.sub-menu");

如果相应的html发生变化，无论什么原因，

<a class="subMenu" .... </a>

功能已损坏。

问题

• 处理紧耦合的最佳方法是什么？
• 有哪些方法可以放松它？

答案、方法

• 使用 html 自定义数据属性将 css 与 js 逻辑分开。例如在 html 上添加 data-submenu="true" 并在 js 端使用 var mySubnav = $("[data-submenu]");。
• 实现可靠的测试环境
• 尽可能松耦合，使用最不具体的选择器，例如$("a.sub-menu')。See also
• 通过 (1) 预先检索对静态 DOM 元素的引用，以及 (2) 将选择器字符串存储在一个位置(在代码的顶部)，从 jQuery 代码主体中消除表示 CSS 选择器的实际字符串文字。
• 使用 javascript 框架，例如 Backbone，它通过 View 将 javascript 与 DOM 分离
• 使用delegate和 live关于事件管理引起的耦合

Answer 1

这可能不是一个流行的答案，但是......测试，测试，测试。一般来说，JQuery 和 Javascript 通常是紧密耦合的，这是有充分理由的；它们是在浏览器中运行的代码，因此您希望保持相对快速的性能。因此，注入(inject)一个允许松散耦合的间接层会降低性能；同样，它可能有点矫枉过正，因为通常在编写的 JQuery/Javascript 代码和为它们编写的页面之间有紧密的配对；这同样是 Javascript 历史发展的产物，但事实就是如此。因此，紧耦合非常“正常”。

与任何紧密耦合一样，处理这种紧密耦合的方法是确保您已经进行了良好的测试以涵盖任何耦合故障。测试可以确保耦合是正确的，并且它确实是确保您期望的功能的最佳方式。