jQuery: cosa è "vietato" fare in plain Javascript

Question

Una domanda di best practice jQuery.

Sto scrivendo una pagina web molto intensiva con jQuery. Sono nuovo di jQuery e noto il suo potere, ma come sono venuto con esperienza e conoscenza javascript pesanti, la mia domanda è: cosa dovrebbe essere fatto in jQuery e cosa in plain JavaScript.

Ad esempio, esistono callback che inviano un oggetto DOM semplice come argomento. Dovrei usare quello o dovrei avvolgerlo (come $(this)).

Ha importanza se faccio questo.x = yo $ (questo) .attr ("x", y).

Answer 1

Se la funzione riceve un oggetto DOM e non è necessaria alcuna funzionalità jQuery per tale oggetto DOM, non è necessario convertirlo in un oggetto jQuery. Ad esempio, se si riceve un oggetto casella di controllo, è possibile esaminare la proprietà checked senza alcun utilizzo di jQuery.

Tuttavia, se è necessario passare a un elemento diverso da quello casella di controllo, potrebbe essere utile per convertirlo:

jQuery (come fanno altre biblioteche) fondersi perfettamente con JS nativi. Se hai bisogno di funzionalità aggiuntive, aumenta l'oggetto in questione.

Come per la tua ultima domanda: potresti trovare utile la funzione data per evitare attributi DOM non standard. Se la tua proprietà x nella tua domanda è in effetti un attributo DOM valido, puoi scrivere sia this.x = y o $(this).attr('x', y), IMO non importa molto. Tuttavia, se x non è un attributo DOM, utilizzare

$(this).data('key', value) 

questo modo, è possibile memorizzare coppie chiave-valore arbitrari con l'elemento DOM, dove value può essere un valore arbitrario primitivo o oggetto.

Answer 2

Penso che sia un giudizio. Usa il tuo buon senso.

Per esempio, se si dispone di 1000 div nella pagina, probabilmente non vuole avvolgere dentro $ (..)

$('div').click(function() { 
    this.id = Random.guid(); // instead of $(this).attr('id', Random.guid()); 
}); 

Come per gli altri incarichi, fino a quando si capisce che cosa jQuery sta facendo, puoi mantenerlo solo per coerenza, ma fai attenzione ai problemi di prestazioni come nell'esempio sopra.

Come cita @colinmarc, a volte jQuery offusca la distinzione tra attributi di elemento e proprietà dell'oggetto che possono essere fuorvianti e bug.

Answer 3

Quando si utilizza jQuery, restituisce sempre un'istanza di jQuery a meno che non si utilizzi una funzione come val();

la ragione per cui usiamo $ (this) .value invece di this.value è assicurarsi che questa sia un'istanza di jQuery.

se da qualche parte nel codice si imposta una variabile denominata my_link witch equivale a un oggetto DOM e non a una funzione jQuery. Inoltre nella propria applicazione my_link.val() risulterebbe in un errore, ma facendo $ (my_link) .val() ti assicurerà che la funzione val sarà disponibile. come $() restituisce un'istanza di jquery.

Ci scusiamo per la mancanza di comprensione nel mio post precedente.

Answer 4

Poiché gli oggetti jQuery hanno funzionalità più ricche rispetto ai nodi NAT JS DOM, se ci si trova sulla recinzione, si potrebbe anche racchiudere jQuery. JQuery è così leggero, non c'è davvero molto motivo per non usare oggetti jQuery.

Ha importanza se faccio questo.x = yo $ (questo) .attr ("x", y).

Il nativo sarà leggermente più veloce, ma probabilmente trascorrere più tempo in altro attraversamento DOM code-- o edificio. In questo esempio specifico, il primo è più conciso, quindi lo sceglierei. Poiché jQuery è così leggero, tendo a passare avanti e indietro in modo fluido.

Qui ci sono altre linee guida che seguiamo:

• Per callback, come un gestore di clic, è necessario seguire l'API-- solito un nodo DOM. Il codice che scrivi è simile dovrebbe probabilmente prendere anche i nodi DOM. Ma se hai una lista di oggetti, usa sempre un oggetto jQuery.
• Per la maggior parte del codice, provo a vedere se è possibile strutturare il codice come un plugin jQuery, applicando alcune trasformazioni a un set di nodi DOM. Se puoi farlo, otterrai delle indicazioni dall'architettura dei plugin.
• Uso il meccanismo di collegamento/trigger di jQuery poiché è abbastanza flessibile e con accoppiamento basso.
• Per mantenere il codice corretto, suggerirei il nome che antepone gli oggetti jQuery con un segno di dollaro. Ad esempio, var $this = $(this);. Sebbene non sia davvero un grosso problema chiamare $() eccessivamente, finisce per sembrare un po 'sciatto se lo si chiama troppo.

Spero che questo aiuti.