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

Question

描述

通过设计,大多数jquery代码导致很多紧耦合,例如选择器假设html的特定结构

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

如果相应的html发生变化,无论出于何种原因,

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

功能被打破了.

题

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

答案,方法

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

Answer 1

这可能不是一个流行的答案,但...测试,测试,测试.JQuery和Javascript通常是紧密耦合的,并且有充分的理由; 它们是在浏览器中运行的代码,因此您希望保持性能相对活泼.因此,注入允许更松散耦合的间接层会降低性能; 同样,它可能有点过分,因为在编写的JQuery/Javascript代码和它们为其编写的页面之间通常存在紧密的配对; 这同样是Javascript历史发展的一件神器,但这就是它的方式.因此,紧耦合非常"正常".

像任何紧耦合一样,处理这种紧耦合的方法是确保您已经有适当的测试来覆盖任何耦合故障.测试可以确保耦合是正确的,并且它确实是确保您期望的功能的最佳方式.

Answer 2

对 UI 挂钩使用自定义前缀类ui-specificGuy

提供的 HTML

<div class="container grid8">
    <ul class="ul1 horizontal">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

不好- 使用有针对性的类/钩子

$('.container.grid8').stuff();
$('.ul1.horizontal').moreStuff();

调整 HTML

<div class="container grid8 ui-specificContainer">
    <ul class="ul1 horizontal ui-specificList">
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>
</div>

好- 使用您自己的专用类/挂钩

$('.ui-specificContainer').stuff();
$('.ui-specificList').moreStuff();

仅根据需要具体说明

如果这能实现你的目标。

$('.ui-targetedElement')

那为什么要有这样的选择器呢？

$('ul > li a.ui-targetedElement')

这只是将不必要的 DOM 结构依赖项引入到您正在构建的功能中，您应该能够在这方面积极主动，因为此时您应该提供自己的钩子（前缀类），对吗？

最后，我想说，由于 DOM 和脚本一起工作的本质，DOM 和脚本之间的紧密耦合有时是不可避免的。

全文