La manipolazione del DOM jQuery dovrebbe essere evitata a favore dei motori di template JavaScript?

@Jason, queste note mi vengono in mente:

1. I modelli JavaScript sono utili, soprattutto quando si dispone di un elenco (o array) come origine dati sottostante. Ad esempio, quando si ottiene l'elenco di dipendenti attivi in formato JSON dal server, è preferibile associarlo a un modello JavaScript al momento del ritorno (risposta AJAX) anziché eseguire il loop su ciascun dipendente e creare elementi HTML concatenando insieme le stringhe e le proprietà dei dipendenti .
2. Tuttavia, a volte esistono situazioni in cui l'associazione JavaScript è semplicemente un sovraccarico. La maggior parte delle volte, non hai una lista di record. Piuttosto, hai un singolo valore nella tua risposta AJAX. Ad esempio, quando si vota su siti stackexchange, il valore restituito non è un elenco, quindi non è adatto per essere utilizzato con un modello JavaScript.

3. Un'altra situazione in cui potresti non essere in grado di utilizzare i modelli JavaScript è l'origine dati eterogenea, invece che omogenea. Ad esempio, in risposta a una richiesta AJAX, è possibile restituire questa stringa JSON:

   "{"firstName":"Saeed","lastName":"Nemati","isEmployed":true,"interests":["computer","music","language","philosophy","mathematics","physics"],"voteDirection":"up","totalScore":5}"
   

Che è un oggetto complesso di un dipendente e un'azione di voto. Anche in questi scenari, non è possibile utilizzare i modelli JavaScript e utilizzare direttamente la manipolazione DOM.

1. Il refactoring di JavaScript o il refactoring di jQuery a volte diventano un mal di testa, poiché non ci sono ancora strumenti sofisticati là fuori per aiutarti a un buon livello. Pertanto, ad esempio, se crei un frammento HTML <div class='employee'><h1>Saeed Nemati</h1></div> su una risposta AJAX in molti punti e poi decidi di creare il tag <a> anziché <h1> , devi concentrarti su questo.

Dipende o complessità (a volte il templating è obbligatorio e talvolta è eccessivo) e la funzionalità che desideri avere.

Ad esempio quando la funzionalità è importante - considera il fatto che Mustache.js (e molti altri sistemi di template) non sanno nulla di DOM, quindi non ti permetterà davvero di aggiornare il template , solo re-rendering, quindi sostituirlo . A volte non vuoi mantenere uno stato (come quando l'elemento " <details> " è espanso o meno) nei tuoi modelli. La sostituzione dell'intera sottostruttura DOM con il modello appena reso perderà questo stato. Esistono sistemi di template (ad esempio, Knockout.js) che consentono di associare i nodi DOM ai valori per combattere questo problema, tuttavia.

Alcuni degli svantaggi del templating per aggiornare il DOM sono attenuati utilizzando una sorta di pattern MVC sul lato javascript - JSON aggiorna un oggetto modello javascript, che viene osservato da un oggetto controller che può aggiornare il DOM tramite template o direttamente.

Questo è molto più rifattorizzabile e ASCIUTTO che ripetere i frammenti HTML in più punti. È anche meglio per gestire JSON complessi, dal momento che il codice per utilizzare l'oggetto JSON per aggiornare il modello può essere scritto una sola volta e non dipende dai dettagli del DOM.