Insidie ​​di jQuery da evitare [chiuso]

Sto iniziando un progetto con jQuery.

Quali insidie ​​/ errori / idee sbagliate / abusi / abusi hai avuto nel tuo progetto jQuery?

Ignorare il risultato prestazionale e abusare dei selettori invece di assegnarli alle variabili locali. Per esempio:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

Piuttosto che:-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

O ancora meglio con il concatenamento : -

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

Ho trovato questo il momento illuminante in cui ho capito come funzionano le pile di chiamate.

Modifica: suggerimenti incorporati nei commenti.

Comprendi come utilizzare il contesto. Normalmente, un selettore jQuery cercherà l'intero documento:

// This will search whole doc for elements with class myClass
$('.myClass');

Ma puoi accelerare le cose cercando in un contesto:

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

Non utilizzare i selettori di classe nudi, in questo modo:

$('.button').click(function() { /* do something */ });

Questo finirà per guardare ogni singolo elemento per vedere se ha una classe di "pulsante".

Invece, puoi dare una mano, come:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

L'ho imparato l'anno scorso dal blog di Rebecca Murphy

Aggiornamento : questa risposta è stata data oltre 2 anni fa e non è corretta per la versione corrente di jQuery. Uno dei commenti include un test per dimostrarlo. Esiste anche una versione aggiornata del test che include la versione di jQuery al momento della risposta.

Prova a dividere le funzioni anonime in modo da poterle riutilizzare.

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

• Evitare di abusare di documenti pronti.
• Mantieni il documento pronto solo per inizializzare il codice.
• Estrarre sempre le funzioni esterne al documento in modo che possano essere riutilizzate.

Ho visto centinaia di righe di codice all'interno dell'istruzione doc ready. Brutto, illeggibile e impossibile da mantenere.

Durante l'utilizzo della $.ajaxfunzione per le richieste Ajax al server, è necessario evitare di utilizzare ilcomplete evento per elaborare i dati di risposta. Verrà attivato se la richiesta ha avuto esito positivo o meno.

Piuttosto che completeusaresuccess .

Vedi Eventi Ajax nei documenti.

Eventi di animazione "concatenati" con callback.

Supponiamo di voler animare un paragrafo che scompare facendo clic su di esso. Volevi anche rimuovere l'elemento dal DOM in seguito. Potresti pensare di poter semplicemente incatenare i metodi:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

In questo esempio, .remove () verrà chiamato prima che .fadeOut () sia completato, distruggendo l'effetto di dissolvenza graduale e facendo semplicemente svanire immediatamente l'elemento. Invece, quando vuoi lanciare un comando solo dopo aver terminato il precedente, usa i callback:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

Il secondo parametro di .fadeOut () è una funzione anonima che verrà eseguita una volta completata l'animazione .fadeOut (). Ciò provoca uno sbiadimento graduale e una successiva rimozione dell'elemento.

Se si associa () lo stesso evento più volte, verrà generato più volte. Di solito vado sempre unbind('click').bind('click')solo per essere al sicuro

Non abusare dei plug-in.

Il più delle volte avrai bisogno solo della libreria e forse dell'interfaccia utente. Se lo mantieni semplice, il tuo codice sarà gestibile a lungo termine. Non tutti i plug-in sono supportati e gestiti, in realtà la maggior parte non lo è. Se riesci a imitare la funzionalità utilizzando gli elementi principali, lo consiglio vivamente.

I plug-in sono facili da inserire nel codice, ti fanno risparmiare un po 'di tempo, ma quando hai bisogno di qualcosa in più, è una cattiva idea modificarli, poiché perdi i possibili aggiornamenti. Il tempo che risparmi all'inizio perderai in seguito alla modifica dei plug-in obsoleti.

Scegli i plug-in che usi saggiamente. Oltre alla libreria e all'interfaccia utente, utilizzo costantemente $ .cookie , $ .form , $ .validate e thickbox . Per il resto, sviluppo principalmente i miei plug-in.

Trabocchetto: utilizzo di loop anziché selettori.

Se ti accorgi che stai cercando il metodo j.

Ulteriori informazioni sui selettori jQuery:
http://docs.jquery.com/Selectors

Trabocchetto: NON usare uno strumento come Firebug

Firebug è stato praticamente realizzato per questo tipo di debug. Se hai intenzione di muoverti nel DOM con Javascript, hai bisogno di un buon strumento come Firebug per darti visibilità.

Ulteriori informazioni su Firebug: http://getfirebug.com/

Altre grandi idee sono in questo episodio del Polymorphic Podcast: (jQuery Secrets with Dave Ward) http://polymorphicpodcast.com/shows/jquery/

Incomprensione nell'uso di questo identificatore nel giusto contesto. Per esempio:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

E qui uno degli esempi su come risolverlo:

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

Evita di cercare più volte l'intero DOM. Questo è qualcosa che può davvero ritardare la tua sceneggiatura.

Male:

$(".aclass").this();
$(".aclass").that();
...

Buona:

$(".aclass").this().that();

Male:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

Buona:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

Memorizza sempre $ (questo) su una variabile significativa specialmente in un .each ()

Come questo

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

Simile a quello che ha detto Repo Man, ma non del tutto.

Durante lo sviluppo di winform ASP.NET, lo faccio spesso

$('<%= Label1.ClientID %>');

dimenticando il segno #. La forma corretta è

$('#<%= Label1.ClientID %>');

eventi

$("selector").html($("another-selector").html());

non clona nessuno degli eventi: devi ricollegarli tutti.

Come da commen t di JP, clone () rinnova gli eventi se passi true.

Evitare la creazione multipla degli stessi oggetti jQuery

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

Lo dico anche per JavaScript, ma jQuery, JavaScript non dovrebbe MAI sostituire i CSS.

Inoltre, assicurati che il sito sia utilizzabile per qualcuno con JavaScript disattivato (non pertinente oggi come una volta, ma sempre bello avere un sito completamente utilizzabile).

Effettuare troppe manipolazioni DOM. Mentre i metodi .html (), .append (), .prepend (), ecc. Sono ottimi, a causa del modo in cui i browser visualizzano e ri-renderizzano le pagine, usarli troppo spesso causerà rallentamenti. Spesso è meglio creare l'html come stringa e includerlo una volta nel DOM, anziché modificarlo più volte.

Invece di:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

Prova questo:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

O anche questo ($ wrapper è un elemento appena creato che non è stato ancora iniettato nel DOM. L'aggiunta di nodi a questo div wrapper non causa rallentamenti e alla fine aggiungiamo $ wrapper a $ parent, usando solo una manipolazione DOM ):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

Utilizzo di ClientID per ottenere l'id "reale" del controllo nei progetti ASP.NET.

jQuery('#<%=myLabel.ClientID%>');

Inoltre, se si utilizza jQuery in SharePoint, è necessario chiamare jQuery.noConflict ().

Passando ID invece di oggetti jQuery alle funzioni:

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

Passare un set avvolto è molto più flessibile:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

Uso eccessivo di concatenamento.

Guarda questo:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

Spiegazione

Usa lo stile dell'accumulatore di stringhe

Utilizzando l'operatore + viene creata una nuova stringa in memoria e gli viene assegnato il valore concatenato. Solo dopo questo il risultato viene assegnato a una variabile. Per evitare la variabile intermedia per il risultato di concatenazione, è possibile assegnare direttamente il risultato utilizzando l'operatore + =. Lento:

a += 'x' + 'y';

Più veloce:

a += 'x';
a += 'y';

Le operazioni primitive possono essere più veloci delle chiamate di funzione

Considerare l'utilizzo di operazioni primitive alternative rispetto alle chiamate di funzione in cicli e funzioni critici per le prestazioni. Lento:

var min = Math.min(a, b);
arr.push(val);

Più veloce:

var min = a < b ? a : b;
arr[arr.length] = val;

Maggiori informazioni su Best practice sulle prestazioni JavaScript

Se vuoi che gli utenti vedano entità html nel loro browser, usa 'html' invece di 'text' per iniettare una stringa Unicode, come:

$('p').html("Your Unicode string")

i miei due centesimi)

Di solito, lavorare con jquery significa che non devi preoccuparti degli elementi DOM sempre attuali. Puoi scrivere qualcosa del genere -$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')}) - e questo codice verrà eseguito senza generare errori.

In alcuni casi questo è utile, in alcuni casi - per niente, ma è un dato di fatto che jquery tende a essere, beh, a favore delle partite vuote. Ancora,replaceWith genererà un errore se si tenta di utilizzarlo con un elemento che non appartiene al documento. Lo trovo piuttosto intuitivo.

Un altro inconveniente è, a mio avviso, l'ordine dei nodi restituiti dal metodo prevAll () - $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll(). Non è un grosso problema, in realtà, ma dovremmo tenere presente questo fatto.

Se prevedi di utilizzare Ajax in molti dati, ad esempio 1500 righe di una tabella con 20 colonne, non pensare nemmeno di utilizzare jQuery per inserire tali dati nel tuo HTML. Usa JavaScript semplice. jQuery sarà troppo lento su macchine più lente.

Inoltre, per metà del tempo jQuery farà cose che lo renderanno più lento, come cercare di analizzare i tag di script nell'HTML in arrivo e gestire le stranezze del browser. Se si desidera una velocità di inserimento rapida, attenersi a JavaScript semplice.

Utilizzo di jQuery in un piccolo progetto che può essere completato con solo un paio di righe di JavaScript ordinario.

Non capire l'associazione di eventi. JavaScript e jQuery funzionano in modo diverso.

A grande richiesta, un esempio:

In jQuery:

$("#someLink").click(function(){//do something});

Senza jQuery:

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

Fondamentalmente gli hook richiesti per JavaScript non sono più necessari. Vale a dire il markup inline (onClick, ecc.) Perché puoi semplicemente usare gli ID e le classi che uno sviluppatore normalmente sfrutterà per scopi CSS.