I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

Attenzione: a breve questo blog verrà dismesso e sarà attivo il nuovo a questo indirizzo.

Best practice nell'append in jQuery

Salve a tutti, in questo articolo vorrei parlarvi di best practice per gli append JQuery, molto importanti per scrivere codice efficiente soprattutto nei dispositivi mobili.

Il questito che normalmente ci poniamo quando un server ci restituisce un risultato in JSON è come farne il parsing per appenderlo in un div nell'html. Mettiamo caso che il server ci restituisca un oggetto JSON e lo parsiamo, di solito, in questo modo:

$.each(res, function () {
   $('#container').append('this.titolothis.testo');
});

Ci sono due cose che in questo codice non sono efficienti:

  • la prima è che il selettore $('#container) verrà chiamato ad ogni riga dell'oggetto JSON e quindi ogni volta JQuery deve analizzare il DOM per trovare l'elemento con ID container (non efficiente)
  • la seconda è che la funzione append() viene eseguita sempre per ogni ciclo dell'each (non efficiente).

Date queste osservazioni riusciamo a ottimizzare il codice in questo modo:

var html = '';
var el = $('#container');//div con id container
$.each(res, function () {          
   html += ' this.titolo this.testo ';
});
el.append(html);

In questo caso l'elemento viene analizzato una sola volta come l'append che viene chiamato una sola volta alla fine del ciclo.

I più letti

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento