Ci sono degli svantaggi a iniezione Javascript class-based?

Question

A fenomeni che sto vedendo sempre di più è il codice JavaScript che è legato ad un particolare elemento in una pagina particolare, piuttosto che essere legato alla tipo di elementi o modelli di interfaccia utente.

Per esempio, dire che abbiamo avuto un paio di menu animati in una pagina:

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

<!-- ... -->

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

potrebbe esistere Questi due menu sulla stessa pagina o su pagine diverse, e alcune pagine potrebbe non avere alcun menu.

io spesso vedere codice Javascript come questo (per questi esempi, sto usando jQuery):

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

Si noti il ??problema?

Il JavaScript è strettamente accoppiato al casi particolari di un modello di interfaccia utente piuttosto che il modello UI stessa.

Ora Non sarebbe molto più semplice (e più pulita) per fare questo, invece? -

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

Poi possiamo mettere la classe 'a tendina menu' nelle nostre liste in questo modo:

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

<!-- ... -->

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

Questo modo di fare le cose avrebbe i seguenti vantaggi:

• Più semplice Javascript -. Abbiamo solo bisogno di collegare una volta per la classe
• Evitiamo alla ricerca di istanze specifiche che potrebbero non esistere su una determinata pagina.
• Se togliamo un elemento, non abbiamo bisogno di Caccia al tesoro nei Javascript per trovare il codice allegare per quell'elemento.

Credo tecniche simili a questo sono stati pionieri da alcuni articoli su alistapart.com.

Sono stupito queste semplici tecniche ancora non hanno guadagnato l'adozione diffusa, e io continuo a vedere 'best practice' code-campioni e framework JavaScript che si riferiscono direttamente alle istanze dell'interfaccia utente, piuttosto che i modelli di interfaccia utente.

C'è un motivo per questo? C'è qualche grande svantaggio per la tecnica che ho appena descritto che io sono a conoscenza di?

Answer 1

Prima di tutto sono d'accordo con te che utilizzando l'approccio di classe è migliore, in generale.

Ma non credo che mi piacerebbe andare al punto di dire che è meno l'accoppiamento del codice per l'interfaccia utente. Se ci pensate, se il codice presuppone ID "pippo" vs. nome di classe "foo", ancora dovete sapere che quando si lavora con l'interfaccia utente. C'è ancora un 'contratto' tra di loro -. Se si soddisfano attraverso ID o classe non è davvero diverso

Uno svantaggio di utilizzare l'approccio di classe mi immagino è la velocità - dovrebbe essere più veloce per trovare un particolare elemento per ID che trovare potenzialmente più elementi per classe. La differenza è probabilmente però del tutto trascurabile.

Ma, nel caso in cui il codice è stato progettato per collegare più comportamenti, come nel tuo esempio due-discesa, utilizzando la classe di certo ha più senso. Questo è meno accoppiamento in quanto il codice è un po 'più generalizzato, e l'interfaccia utente più probabilità di essere personalizzabile w / o modifica del codice.

Una cosa che vorrei cambiare in entrambe le esempi ... perché hanno la UL nel selettore? Se il codice sa che può solo eventualmente lavoro se il bersaglio è un UL, beh, questa è una cosa - ma in quel caso, sarebbe meglio evitare l'UL nel selettore e lasciare che il codice di lanciare un errore significativo se la bersaglio risulta non essere un UL, per timore che la pagina basta fare nulla senza alcuna indicazione sul perché (ad esempio perché l'interfaccia utente ha messo la ID / classe su un OL).

Quindi, in altre parole, solo "#foo" o ".foo" non "ul.foo", ecc.

Tengo a precisare che nel caso in cui qualcuno pensa che la UL rende in qualche modo il selettore più efficiente, non è così, dal momento che i selettori vengono valutati da destra a sinistra.

Answer 2

Il vostro approccio è preferito.

La ragione per cui la gente fa le cose in modo diverso è perché possono e funziona ancora.