Posizionare i modelli JavaScript sul lato client in HTML o JavaScript?

Question

Dovrebbero i modelli lato client come il seguente (con motore di template di sottolineatura):

<p class="foo"><%= bar %></p> 

essere inseriti in un file HTML separato o un file JavaScript separata? So che potrebbe funzionare in entrambi i modi.

Ad esempio, un file JavaScript potrebbe semplicemente contenere un elenco di variabili stringa in questo modo:

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>'; 

Ma ho anche visto il seguente:

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script> 

Proprio da una separazione degli interessi punto di vista dove si trova il modello di archiviazione?

Answer 1

Io di solito userò un sistema di gestione del risparmio che concatenare e JavaScript e CSS minify, e tradurre i file di modello lato client in stringhe JS appesi fuori una var globale. Questo genere di cose dipende dalla tua piattaforma, ma nel mondo dei binari vuoi guardare jammit o sprockets (che ora fa parte di binari)

Se non ho una gestione patrimoniale decente, di solito finirò per usare il metodo del tag script, con i modelli suddivisi in partial sul server e inclusi nella parte inferiore della pagina. Si tratta di una sorta di dolore con cui lavorare, ma IMO qualcosa di più quindi i vostri semplice esempio modelli di stringhe in realtà non dovrebbe esistere in linea nel file javascript.

Answer 2

preferisco di gran lunga la seconda opzione, per i seguenti motivi:

• Utilizzando stringhe significa trattare con citazioni fuga e simili.
• modelli Multi-line sono un dolore in Javascript, in quanto non si può avere stringhe multilinea senza concatenazione. I modelli di qualsiasi lunghezza saranno più leggibili su più righe.
• No evidenziazione della sintassi nelle stringhe JS.

Tuttavia, l'utilizzo della seconda opzione richiede il caricamento del file di modello in qualche modo, o l'inclusione nel codice HTML, oppure l'inserimento nel codice HTML in fase di compilazione. In più c'è un altro dato in testa grazie al tag script, e si deve ottenere la stringa dal DOM utilizzando .html() o un metodo simile di jQuery. Quindi, in termini di prestazioni, l'opzione stringa potrebbe essere migliore, motivo per cui il suggerimento di @ Matt di inserirlo in stringhe al momento della compilazione è probabilmente il migliore.

Answer 3

Si potrebbe utilizzare jQuery's templating engine e caricare tutti i modelli in un file js esterno.

Answer 4

Se si utilizza il motore di template lato client logless come i modelli Transparency, è possibile incorporarli nel codice HTML principale poiché i modelli stessi sono HTML validi.

Esempio:

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div> 

Per i modelli da utilizzare in maniera widget di come un contenitore di <div> nascosta fa bene.

Mettere codice HTML'ish a codeblocks Javascript e stringhe Javascript è brutto e dovrebbe essere evitato se possibile. Non è sintattica la sintassi e si perdono facilmente errori.