(jQuery) Cosa c'è di sbagliato con metodi come .append?

6

tl; dr: Cosa c'è di sbagliato nell'efficienza di metodi come .append () e quali possono essere alternative a questo?

Spiegazione: Ciao a tutti. Occasionalmente devo creare test A / B per i siti Web, il che significa che devo cambiare i siti utilizzando solo jQuery (o JavaScript ovviamente) per modificare aspetti e funzionalità dei siti web. Questo significa no 'hard'-html / css o simili. Ora sono praticamente l'unico con la minima conoscenza di javascript che funziona qui, quindi non ho molte recensioni tra pari. Ora stiamo lavorando con un cliente e il loro sviluppatore mi invia questo feedback:

'jQuery non viene utilizzato in modo ottimale aggiungendo elementi separati / liberi nel DOM'.

Un esempio di questo è un oggetto fisarmonica aggiunto al sito, digitando (qualcosa sulla falsariga di):

$('#site_container').append('<div id="container"><div id="container_click">Content to click on</div></div id="container_expand">Content to be shown when expanded</div></div>');
$('#container_click').click(function(){//animate to height function here});

Ora ho già provato a fare le mie ricerche, e so che digitare un intero elemento con il suo contenuto in 1 stringa non è sicuro come fare un oggetto e quindi aggiungere attributi a quell'oggetto. Per un test temporaneo, tuttavia, non penso che questo sia un grosso problema, dato che tendono a vivere solo per una settimana o due.

Mi rendo conto che la soluzione sembra un po 'fragile, ma non vedo un approccio diverso.

Ora la mia domanda è: cosa significa l'altro sviluppatore in modo ottimale? C'è una parte importante di jQuery che mi manca? C'è un modo per affrontare problemi come questi in modo più efficiente?

    
posta Mortaza 17.12.2014 - 12:15
fonte

1 risposta

3

Ciò che probabilmente intendevano è che la manipolazione del DOM è lenta e che è possibile evitare l'iniezione di HTML attraverso jQuery.

Quello che puoi fare, invece, è avere varianti A / B sia nel tuo codice HTML originale. Quindi, si nasconde la variante B di default e si passa da A a B semplicemente nascondendo quella e mostrando l'altra.

Un'alternativa ancora migliore è avere due modelli HTML, uno per la variante A, l'altro per la B. In questo modo, non è nemmeno necessario fare affidamento su JavaScript.

Per quanto riguarda le prestazioni, non sono sicuro che tu debba prendere in considerazione la loro osservazione. A meno che tu non stia facendo un molto di manipolazione DOM, .append() forse rallenta la pagina di pochi millisecondi o anche microsecondi. A meno che tu non abbia profilato l'app e stabilito che il tuo .append() è il vero collo di bottiglia, non preoccuparti.

Potresti, d'altra parte, essere interessato da 43.439 ragioni per usa append () correttamente articolo del blog e .append VS .html VS.innerHTML performance risposta su StackTranslate.it .

    
risposta data 23.05.2017 - 14:40
fonte

Leggi altre domande sui tag