Come scrivere JavaScript mantenendo HTML / CSS fuori da esso

Utilizza un modello mvw (modello / vista / altro)

Modello
• : libreria "pura" javascript che modella concetti astratti. Questa parte di solito contiene oggetti e amp; nomi dei metodi relativi al dominio dell'applicazione (business auto - > oggetti auto / contratti di assicurazione) e alla logica di accesso ai dati.
• visualizza: un linguaggio personalizzato che descrive come appare l'interfaccia utente. Preferibilmente, la lingua dovrebbe essere vicina a HTML.
• qualcosa per far sì che entrambe le parti comunichino senza che l'una dipenda troppo dall'altra. Una modifica nei dati del modello deve comportare una modifica degli elementi corrispondenti della vista (vista modello - >). Un mouse clic del mouse genera una chiamata al metodo da qualche parte nel modello (visualizza - > modello).

Con questi concetti, puoi scegliere stack diversi

• Puoi usare una grande struttura come angolare. Le viste sono template dom html. Il modello è diviso tra controller e amp; servizi.
• puoi usare il backbone (~ model) + jquery (~ view)
• puoi utilizzare react.js

... la lista continua. Il numero di strumenti disponibili è in realtà piuttosto spaventoso. Controlla link per un bel elenco di esempi.

Esempio di soluzione con angolare

In angolare, la connessione tra il modello & la vista viene eseguita con un viewmodel & associazione dati bidirezionale. Un modello di vista è un oggetto javascript. Sia la vista e l'amp; il modello può leggere & scrivi su questo oggetto e reagisci ai cambiamenti.

nella tua vista, scrivi l'HTML:

<TABLE class="list_grey" style="float: left; margin-left: 20px;" ng-hide="hideAll">
<TR ng-repeat="row in rows">
    <td ng-repeat="val in row" ng-class="{selected : val.sel}"> {{ val.label }} </td>
</TR>
</TABLE>

nel tuo controller, ti occupi solo dei valori javascript:

$scope.rows = [
    [{label : "foo"}, {label : "bar"}],
    [{label : "foo2"}, {label : "bar2", sel : true}]
]

$scope.hideAll = false;

ng-repeat ti consente di visualizzare un elenco di elementi. ng-class & ng-hide sono usati per controllare la classe & visibilità degli elementi.

Parole di chiusura

Utilizzando altri framework, l'organizzazione risultante può variare, ma la separazione essenziale esiste ancora. In react.js, l'associazione dati è unidirezionale, il che implica un costrutto differente. Il framework mvw di solito si occupa della comunicazione tra i componenti, quindi non è necessario utilizzare jquery.

Questa è una buona cosa se il tuo progetto non è banale. La gestione di un'app complessa con solo jQuery può portare a un caos di interazioni di callback che potrebbero diventare difficili da mantenere.

L'utilizzo di un framework mvw completo come angolare o ambra richiede un po 'di apprendimento. Alcune altre librerie hanno un ambito più piccolo come react.js & knockout.js.

Ovviamente non devi iniziare a imparare uno di questi strumenti al momento. L'importante è ottenere la separazione tra la vista e l'ampli; il modello. Puoi usare jquery per scrivere funzioni che modificano il dom in base all'osservazione fatta su una libreria javascript pura.

Puoi anche usare jquery per scrivere i callback (view - > model). (modello - > view) può essere scritto usando editore / osservatore. Questa parte dovrebbe essere il più piccola possibile ed essere l'unica cosa che collega il modello e le viste.

A seconda di quali browser devi supportare , potresti essere in grado di sfruttare i vantaggi di Tag modello HTML 5 .

Il tag modello ti consente di mantenere i tuoi elementi HTML parziali nel file HTML ma non li hanno resi nel browser. Per visualizzare effettivamente i contenuti, si clona il contenuto del modello e lo si aggiunge al DOM utilizzando javascript. Puoi clonare e aggiungere tutte le volte che è necessario durante il runtime, mentre solo definendo e mantenendo il contenuto dell'HTML una volta, mantenendo le cose carine e ASCIUTTI.

Mantenere il tuo CSS e JS in file separati è anche un'ottima pratica, in modo che tu possa eseguire minification per migliorare la velocità di download della pagina. Consente inoltre di riutilizzare css e js su più pagine del tuo sito e memorizzate nella cache del browser tra tali richieste, migliorando ancora le prestazioni del sito. Consente inoltre di utilizzare strumenti diversi per i diversi tipi di file o di utilizzare un IDE di sviluppo Web con evidenziazione della sintassi diversa e altre funzionalità specifiche della lingua in base alla lingua del file.

HTML 5 rocks ha un buon tutorial sul tag del template con codice di esempio .

Metterlo insieme

• estrai l'HTML nel tuo JS e inseriscilo in un tag template nel tuo file html principale

• posiziona css nel proprio file

• posiziona JS nel proprio file

• includono i file css e js nel file html

• nel tuo file js, crea funzioni separate per clonare il contenuto del tag del template, aggiungi i tuoi dati JSON nella parte appropriata del contenuto clonato, aggiungi i contenuti al DOM.

• nel tuo file js, crea una funzione per chiamare le funzioni sopra in base al selection var

• associa i tuoi eventi di navigazione ai pulsanti di navigazione

Avvertimenti

Poiché si tratta di un tag nuovo , funziona solo in alcuni browser (attualmente Firefox e Chrome). Se il tuo sito deve funzionare con altri browser, ti consigliamo di utilizzare un polyfill che è alternativo codice javascript e html che gestisce i casi in cui il supporto del browser non è ancora presente.

Le mie opinioni iniziali

• estrae l'HTML da JS e posiziona l'HTML nel file HTML (lo stesso con i CSS)
• carica JS nel file HTML del contenitore genitore
• nel file JS usa JS / jQuery per mostrare / nascondere i DIV in HTML secondo necessità come per selection var
• usa JS / jQuery per associare eventi di navigazione ai pulsanti
• hanno eventi di navigazione che popolano le celle di una tabella con attributi id assegnati.

Un po 'di dolore per riscrivere quello che ho adesso, ma spero che il risultato finale sarà più manutenibile e più facile da estendere / personalizzare. Ad esempio, per HTML posso andare in HTML e modificarlo e utilizzare gli strumenti HTML per le cose lì, piuttosto che gestire l'HTML incorporato come stringhe in JavaScript. Lo stesso con i CSS. Non sono ancora sicuro se questo sforzo sarà interamente degno di valore, poiché le cose funzionano come sono ora ... tranne che è un lungo pasticcio di un file JS.

Caricamento dati

var selection = eval("(" + document.getElementById("result").innerHTML + ")");

Questo è un metodo abbastanza orribile. Prima di tutto, qualsiasi tag HTML legale nel codice JSON sarebbe analizzato in questo modo, questo potrebbe essere usato per un attacco di iniezione. In secondo luogo, a seconda del browser, molti dettagli possono essere diversi nella stringa innerHTML del testo originale. In generale, l'impostazione di innerHTML deve essere eseguita con cautela e solo se fornisce vantaggi sostanziali alle alternative. E semplicemente non riesco a pensare ad alcun motivo legittimo per leggere da innerHTML .

Considererei un file JSON separato caricato con XMLHttpRequest come metodo principale per l'invio di dati a un'applicazione browser JavaScript. Sul back-end puoi generare il file JSON con PHP, se lo desideri.

Se vuoi davvero che i dati direttamente nel file HTML siano un posto migliore per metterli in un tag script, PHP può farlo bene:

<script>
    var dataFromServer = <?php echo str_replace('</','<\/',$wellFormedJSON)?>
</script>

Si noti che poiché la sequenza </script> può far parte di JSON ben formato, ma non parte di JavaScript in un file HTML, è necessario sfuggire alla sequenza </ , di solito viene eseguita come <\/ che è equivalente come parte di una stringa JSON o JavaScript.

In alternativa puoi creare un file JSONP e caricarlo con un normale tag script , ma nota che questo rende i dati disponibili ad altri domini, quindi non puoi inserire dati privati in tale file.

Pagina dinamica

Nascondere e mostrare elementi usando i CSS è un metodo ragionevole per creare contenuti dinamici, ma non funziona per tutto, e pone l'HTML lontano dal codice che lo modifica, il che può essere un po 'un dolore.

innerHTML sembra facile da usare, sfortunatamente è un metodo abbastanza incline all'introduzione di problemi di sicurezza, poiché ciò che pensavi fosse un testo semplice potrebbe essere interpretato come tag HTML. È perfettamente possibile utilizzare innerHTML in modo sicuro evitando tutto ciò che è pericoloso, ma devi solo commettere un errore per introdurre un buco. Di solito è il metodo più efficace per generare nuovi DOM, ma salvo per i pochi casi in cui ciò è veramente importante, consiglierei di tenervi alla larga, specialmente come uno sviluppatore inesperto.

Puoi creare elementi DOM usando document.createElement e metodi correlati. È relativamente semplice e non ha alcuna trappola di sicurezza. Permette anche di allegare funzioni in ambito locale come gestori di eventi, che è abbastanza elegante una volta che si inizia a utilizzare chiusure. Ma il codice risultante tende ad essere piuttosto lungo e un po 'noioso da scrivere, che considererei il motivo principale per ottenere una libreria per la costruzione del DOM.