Gibt es Nachteile der klassenbasierten JavaScript-Injektion?

Question

Ein Phänomen, von dem ich immer mehr sehe, ist JavaScript -Code, der mit einem bestimmten Element auf einer bestimmten Seite gebunden ist, anstatt an gebunden Arten von Elementen oder UI -Mustern.

Angenommen, wir hatten ein paar Animationsmenüs auf einer Seite:

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

<!-- ... -->

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

Diese beiden Menüs könnten auf derselben Seite oder auf verschiedenen Seiten existieren, und einige Seiten haben möglicherweise keine Menüs.

Ich werde oft JavaScript -Code wie diesen sehen (für diese Beispiele verwende ich JQuery):

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

Beachten Sie das Problem?

Das JavaScript ist eng mit bestimmte Fälle eines UI -Musters eher als das UI -Muster selbst.

Wäre es jetzt nicht so viel einfacher (und sauberer), dies stattdessen zu tun? - -

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

Dann können wir die "Dropdown-Menu" -Klasse auf unsere Listen wie SO legen:

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

<!-- ... -->

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

Diese Art, Dinge zu tun, hätte die folgenden Vorteile:

• Einfacherer JavaScript - wir müssen nur anhängen einmal zur Klasse.
• Wir vermeiden es, nach bestimmten Fällen zu suchen, die auf einer bestimmten Seite möglicherweise nicht vorhanden sind.
• Wenn wir ein Element entfernen, müssen wir nicht durch das JavaScript jagen, um den Anhang -Code für dieses Element zu finden.

Ich glaube, dass ähnliche Techniken von bestimmten Artikeln auf Alistapart.com Pionierarbeit geführt wurden.

Ich bin erstaunt, dass diese einfachen Techniken immer noch keine weit verbreitete Akzeptanz erhalten haben, und ich sehe immer noch "Best-Practice" -Codemples und JavaScript-Frameworks, die sich direkt auf UI-Instanzen und nicht auf UI-Muster beziehen.

Gibt es einen Grund dafür? Gibt es einen großen Nachteil in der Technik, die ich gerade beschrieben habe, dass ich mich nicht bewusst bin?

Answer 1

Zunächst stimme ich Ihnen zu, dass die Verwendung des Klassenansatzes im Allgemeinen besser ist.

Aber ich glaube nicht, dass ich so weit gehen würde zu sagen, dass es weniger eine Kopplung des Code an die Benutzeroberfläche ist. Wenn Sie darüber nachdenken, wenn der Code ID "Foo" gegen den Klassennamen "Foo" annimmt, müssen Sie das immer noch wissen, wenn Sie mit der Benutzeroberfläche arbeiten. Es gibt immer noch einen "Vertrag" zwischen ihnen - ob Sie ihn über ID oder Klasse treffen, ist nicht wirklich anders.

Ein Nachteil für die Verwendung des Klassenansatzes, den ich mir vorstellen würde, ist die Geschwindigkeit - es sollte schneller sein, ein bestimmtes Element durch ID zu finden, als potenziell mehrere Elemente nach Klasse zu finden. Der Unterschied ist jedoch wahrscheinlich völlig vernachlässigbar.

In dem Fall, in dem Ihr Code so konzipiert ist, dass Sie mehrere Verhaltensweisen beibringen, wie in Ihrem zwei-Dropdown-Beispiel, ist die Verwendung der Klasse sicherlich sinnvoller. Das ist weniger eine Kopplung, da Ihr Code etwas generalisierter ist und Ihre Benutzeroberfläche mit größerer Wahrscheinlichkeit anpassbar ist, ohne den Code zu ändern.

Eine Sache, die ich in beiden Beispielen ändern würde ... Warum haben die UL im Selektor? Wenn der Code weiß, dass er nur dann funktionieren kann, wenn das Ziel ein UL ist, ist das eine Sache - aber in diesem Fall wäre es besser, die UL im Selektor zu vermeiden und den Code einen aussagekräftigen Fehler zu werfen, wenn der Es wird festgestellt, dass sich das Ziel nicht als UL handelt, damit die Seite nicht ohne Hinweis darauf ist, warum (z. B. die Benutzeroberfläche, weil die Benutzeroberfläche die ID/Klasse auf einen OL legt).

Mit anderen Worten, nur "#foo" oder ".foo" nicht "ul.foo", usw.

Ich sollte darauf hinweisen, dass jemand denkt, dass die UL den Selektor irgendwie effizienter macht, da die Selektoren von rechts nach links bewertet werden.

Answer 2

Ihr Ansatz wird bevorzugt.

Der Grund, warum Menschen Dinge auf unterschiedliche Weise tun, ist, dass sie können und es immer noch funktioniert.