Y a-t-il des inconvénients à injection Javascript basée sur la classe?

Question

Un phénomène que je vois de plus en plus est un code Javascript qui est lié à un élément particulier sur une page particulière, plutôt que d'être lié à types d'éléments ou modèles UI.

Par exemple, disons que nous avons eu quelques menus animés sur une page:

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

<!-- ... -->

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

Ces deux menus peut exister sur la même page ou sur des pages différentes, et certaines pages pourrait ne pas avoir de menus.

Je vais souvent voir le code Javascript comme celui-ci (pour ces exemples, j'utilise jQuery):

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

Notez que le problème?

Le Javascript est étroitement couplé à cas particuliers d'une configuration de l'interface plutôt que la configuration de l'interface elle-même.

ne serait-il tellement plus simple (et plus propre) de le faire à la place? -

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

Ensuite, nous pouvons mettre la classe « menu déroulant » sur nos listes comme ceci:

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

<!-- ... -->

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

Cette façon de faire aurait les avantages suivants:

• Javascript Simpler -. Nous avons seulement besoin d'attacher une fois à la classe
• Nous évitons la recherche d'instances spécifiques qui pourraient ne pas exister sur une page donnée.
• Si on enlève un élément, on n'a pas besoin de chasser à travers le Javascript pour trouver le code attach pour cet élément.

Je crois que des techniques similaires à ce ont été mis au point par certains articles sur alistapart.com.

Je suis étonné de ces techniques simples ont toujours pas obtenu l'adoption généralisée, et je vois encore « meilleures pratiques » de code-échantillons et cadres Javascript faisant référence directement aux instances interface utilisateur plutôt que des modèles UI.

Y at-il raison? Est-il un grand inconvénient de la technique que je viens de décrire que je ne suis pas au courant de?

Answer 1

Tout d'abord je suis d'accord avec vous que l'utilisation de l'approche de classe est meilleure, en général.

Mais je ne pense pas que j'irais jusqu'à dire qu'il est moins couplage du code à l'interface utilisateur. Si vous y pensez, si le code ID suppose « foo » par rapport nom de la classe « foo », il faut encore savoir que lorsque vous travaillez avec l'interface utilisateur. Il y a encore un « contrat » entre eux -. Si vous le rencontrez par ID ou classe n'est pas vraiment différent

Un inconvénient d'utiliser l'approche de classe I imagine est la vitesse - il devrait être plus rapide de trouver un élément particulier par ID de trouver des éléments potentiellement multiples par classe. La différence est probablement tout à fait négligeable cependant.

Mais, dans le cas où votre code est conçu pour joindre plusieurs comportements, comme dans votre exemple deux menu déroulant, en utilisant la classe est certainement plus logique. C'est moins couplage depuis votre code est un peu plus généralisé, et votre interface utilisateur plus susceptible d'être personnalisable w / o changer le code.

Une chose que je voudrais changer dans vos deux exemples ... Pourquoi les UL dans le sélecteur? Si le code ne le sait peut-être le travail peut si la cible est une UL, eh bien, c'est une chose - mais dans ce cas, il serait préférable d'éviter l'UL dans le sélecteur et laisser le code lancer une erreur significative si la cible se trouve pas être une UL, de peur que la page ne rien du tout sans aucune indication quant à la raison pour laquelle (par exemple parce que l'interface utilisateur a mis l'ID / classe sur un OL).

En d'autres termes, juste "#foo" ou ".foo" non "ul.foo", etc.

Je tiens à souligner que dans le cas où une personne pense que l'UL fait en quelque sorte le sélecteur plus efficace, il ne est pas, puisque les sélecteurs sont évalués de droite à gauche.

Answer 2

Votre approche est préférée.

Si les gens font des choses de différentes façons est parce qu'ils peuvent et cela fonctionne encore.