如何处理或最小化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 ，它通过视图将javascript与DOM分离
• 使用delegate和live关于因事件管理而导致的耦合

Answer 1

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

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

Answer 2

一种选择是使用Javascript框架，例如Backbone。它为您提供了视图的概念，有助于将您的Javascript与DOM结构分离。例如，您可以创建“注释”视图，并将其指定给以下div：

<div class="comment">
    <span class="title"></span>
    <p class="body"></p>
</div>

然后您可以访问视图中相对于comment div：

的元素

var title = this.$(".title");

只要comment div的内部保持不变，就可以轻松更改comment div之外的DOM结构。

Answer 3

使用自定义前缀类进行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和脚本之间的紧密耦合有时是不可避免的，因为它们如何协同工作的性质。

<强> Full Article

Answer 4

如果您正在谈论事件管理，那么尽可能多地使用与dom结构没有紧密耦合的委托和直播。看看下面的网址

直播 - http://api.jquery.com/live/

代表 - http://api.jquery.com/delegate/

Answer 5

我的建议是：

1. 检索DOM准​​备好的静态DOM元素的引用，并将它们放在对象的变量或属性中或其他任何内容。

2. 在一个对象（或几个对象或其他东西）中存储类名，只要这些名称（字符串）在一个地方）

然后你可以这样做：

var mySubnav = $('a.' + C.submenu, navigation);

其中navigation是对#navigation元素的引用，C是类名对象，submenu属性是字符串"sub-menu"。

现在，当您更改HTML代码中的类名时，您只需更新C对象。

想法是通过（1）预先检索对静态DOM元素的引用，以及（2）存储选择器来摆脱表示来自jQuery代码主体的CSS选择器的实际字符串文字字符串在一个地方（代码顶部）。

Answer 6

如果你的html发生变化，那么所有的赌注都会被取消。

你所拥有的不是紧耦合。您的代码必须正常运行。

例如，这就是我认为的紧耦合：

<a class="subMenu" onclick="doSomething()"> .... </a>

松散的版本将是：

$("#navigation a.sub-menu').click(function(){
   //do something
});

Answer 7

如何使用html5数据属性来执行javascript选择器？

<a data-submenu="true" .... </a>

var mySubnav = $("[data-submenu]");

非常清楚javascript是否在html上运行。