Question

我看到越来越多的现象是与特定页面上的特定元素绑定的Javascript代码，而不是绑定到元素或UI模式的种。

例如，假设我们在页面上有几个动画菜单：

<ul id="top-navigation">
    ...
</ul>

<!-- ... -->

<ul id="product-list">
    ...
</ul>

这两个菜单可能存在于同一页面或不同页面上，有些页面可能没有任何菜单。

我经常会看到这样的Javascript代码（对于这些示例，我使用的是jQuery）：

$(document).ready(function() {
    $('ul#top-navigation').dropdownMenu();
    $('ul#product-selector').dropdownMenu();
});

注意问题？

Javascript紧密耦合到UI模式的特定实例，而不是UI模式本身。

现在不是这么简单（而且更干净）吗？ -

$(document).ready(function() {
    $('ul.dropdown-menu').dropdownMenu();
});

然后我们可以将'下拉菜单'类放在我们的列表中，如下所示：

<ul id="top-navigation" class="dropdown-menu">
    ...
</ul>

<!-- ... -->

<ul id="product-list" class="dropdown-menu">
    ...
</ul>

这种做事方式有以下好处：

我相信alistapart.com上的某些文章开创了与此相似的技术。

我很惊讶这些简单的技术仍未得到广泛采用，我仍然看到“最佳实践”代码示例和Javascript框架直接引用UI实例而不是UI模式。

这有什么理由吗？我刚刚描述的那种我不知道的技术有什么大的缺点吗？

Answer 1

首先，我同意你的观点，一般来说，使用班级方法会更好。

但我认为我不会说代码与UI的联系较少。如果你考虑一下，如果代码假定ID为“foo”而不是类名“foo”，那么在使用UI时你仍然需要知道。他们之间仍然存在“契约” - 无论你是通过身份证还是上课来满足，都没有什么不同。

使用我想象的类方法的一个缺点是速度 - 通过ID查找特定元素比按类查找可能的多个元素要快得多。但差异可能完全可以忽略不计。

但是，在你的代码被设计为附加多个行为的情况下，如在你的双下拉列表示例中，使用类肯定更有意义。这是更少的耦合，因为您的代码更加通用化，并且您的UI更可能是可自定义的，无需更改代码。

我在两个例子中都改变了一件事......为什么在选择器中有UL？如果代码知道它只能在目标是UL的情况下工作，那么这是一回事 - 但在这种情况下，最好避免选择器中的UL并让代码抛出一个有意义的错误，如果发现目标不是UL，以免页面在没有任何指示的情况下什么都不做（例如因为UI将ID /类放在OL上）。

换句话说，只是“#foo”或“.foo”而不是“ul.foo”等。

我应该指出，如果有人认为UL以某种方式使选择器更有效，那么它就不会，因为选择器是从右到左进行评估的。

Answer 2

您的方法是首选。

人们以不同方式做事的原因是因为他们可以而且仍然有效。