Buone pratiche per la scrittura di codice HTML in Javascript

Question

Mi chiedevo su questo se le persone hanno forti opinioni sul modo migliore per generare codice HTML al volo, in particolare con le applicazioni basate su Ajax.

Ti basta creare il codice HTML utilizzando lo scripting lato server e poi inviarlo a pagina o forse solo restituire una stringa JSON e lasciare che Javascript fare il lavoro.

A mio parere personale, il primo modo lega il livello di modo di presentazione troppo alla logica e rende più difficile cambiare e un incubo da mantenere. Il secondo modo, anche se è il mio metodo preferito, diventa anche un incubo da mantenere quando la complessità del progetto cresce.

Stavo pensando di utilizzare un sistema di template Javascript come un altro strato, proprio per rendere il codice più robusto e meno rigida. Chiunque ha buone idee di una luce e davvero buon sistema di template JS?

Answer 1

http://ejohn.org/blog/javascript-micro-templating/ è un hack diabolicamente brillante per questo. Il risultato finale è molto pulito.

Answer 2

Anche io preferisco una risposta JSON con la logica di creazione sul lato client HTML.

Purtroppo, la maggior parte degli script di scrittura sul lato client HTML del mondo reale sono rotti, che contiene molti difetti HTML-iniezione che può facilmente diventare buchi di sicurezza cross-site-scripting. Penso che la convinzione è che perché si sta parlando con il proprio server piuttosto che direttamente a un utente ostile, si è in qualche modo ‘sicuro’ e può ottenere via senza correttamente le stringhe quando li interpolando in HTML. Che è, naturalmente, una sciocchezza.

Ho sempre vedere cose del genere:

$('#mydiv').append('<em>Deleted '+response.title+'!</em>');

o

mydiv.innerHTML= '<p>Renamed to '+response.name+'</p>;

o addirittura mod microtemplating di Resig, dove non c'è HTML-escaping fatto per impostazione predefinita. Venite a su , la gente! Abbiamo appena iniziato a ripulire l'eredità di script PHP rotte che servono XSS lato server, ora si vuole introdurre una nuova gamma enorme di exploit XSS lato client?

Sigh. Questo è il richiamo di stringhe. Pensiamo noi li comprendiamo e li possiamo fionda insieme, volenti o nolenti. Ma le stringhe sono traditori, con contesti nascosti e requisiti di fuga. Se è necessario generare codice HTML sul lato client avrete bisogno di una funzione come questa:

function h(s) {
    return s.split('&').join('&amp;').split('<').join('&lt;').split('"').join('&quot;');
}

mydiv.innerHTML= '<p>Renamed to '+h(response.name)+'</p>;

Ma personalmente preferisco metodi DOM. Come con parametrizzazione per SQL, utilizzando i metodi DOM prende la stringa-imbracatura fuori dall'equazione parlando stringhe prime direttamente ai componenti che li consumano. OK, il problema con il DOM è che è piuttosto verbose:

var p= document.createElement('p');
p.appendChild(document.createTextNode('Renamed to '+response.name))
mydiv.appendChild(p);

Ma si può sempre definire le funzioni di supporto per ridurre il che, ad esempio:.

mydiv.appendChild(makeElement('p', {}, 'Renamed to'+response.name));

(La novità creazione elemento in jQuery 1.4 utilizza uno stile simile.)

Answer 3

1 anno fa, abbiamo iniziato una nuova web app, e aveva bisogno di un modo per rendere HTML dai dati JSON, nel browser.
Abbiamo voluto il più velocemente una trasformazione XML / XSLT.

La nostra risposta a questa è stato il motore di template JS PURE .

A differenza di gran parte delle librerie di template JS intorno, mantiene il HTML incontaminate (nessun tag strani a tutti) e ad eccezione di un paio di notazioni, non porta una nuova lingua da imparare, solo JS e HTML.

Il modo in cui lo uso:

• Crea il codice HTML statico direttamente nella pagina
• Quindi aggiungere il passo logica JS dopo passo, e il codice HTML si anima progressivamente
• Una volta che ci si abitua ad esso, sia HTML e JS può avere una vita sicura sviluppo separato, e può essere diviso tra un designer e un lavoro JS sviluppatore

Answer 4

Abbiamo avuto un sistema in cui un sacco di dati veniva passato come JSON dal server e quindi gestita attraverso un motore di template JavaScript sul lato client. In .Net 4.0 (forse anche 3.5 SP1, io non sono sicuro), questo può essere fatto utilizzando client modelli .

Io preferirei che passa sopra l'invio di JSON html. E 'sempre bene tenere i dati e visualizzare separato.

Answer 5

Se si desidera conservare il framework MVC, si dovrebbe lasciare che il vostro quadro modello di fare il template. L'AJAX deve eseguire solo la richiesta al server, che esegue ogni logica DB e business e quindi restituisce l'URL al modello che deve essere caricato.