Come separare JavaScript codice View/Logic correttamente

Question

Ricevo oggetti JSON da un websocket con update/create/delete flags. Sulla base di queste informazioni, aggiornamento, creazione o eliminazione di elementi HTML e binding callback. Questo può influenzare più elementi HTML.

Il mio approccio è stato quello di mettere tutto in oggetti specifici che gestiscono la generazione di HTML tramite jQuery es .:

$.("<table>").addChild($("<tr>")).addClass('test') 

e gli ascoltatori di eventi legano. Ma con l'aggiunta di un numero sempre maggiore di codice è diventato molto complicato e ora sto cercando un modo corretto per separare il codice.

Ci sono idee su come farlo correttamente? Frameworks? Forse jQuery Templates (che mi lascia ancora all'oscuro su come aggiungere callbacks in modo pulito)?

Answer 1

Nel tuo caso ti posso consigliare di dare un'occhiata al Knockoutjs, AngularJS o Backbone.js.

Answer 2

per eseguire il rendering HTML è possibile utilizzare Handlerbars.js è molto maturo e hanno un sacco di documentazione

per l'evento vincolante vi consiglio di usare jQuery delegate sul l'oggetto padre che non aveva soppresso con l'aggiornamento ajax. In questo modo si solo bisogno di riassegnare gli eventi a ogni richiesta

Answer 3

Cercare il quadro MVVM. Questo è esattamente ciò di cui hai bisogno poiché il tuo JavaScript sta diventando sempre più complesso. Separa le tue esigenze di preoccupazione tra il tuo codice di presentazione (html) e Presentation Logic (JavaSript)

Knockout.js è davvero una buona libreria per iniziare, ti consiglio di passare attraverso le esercitazioni per iniziare.

esempio veloce:

HelloWorld.html

<div data-bind="value: helloWorldVariable"></div> 
<input type="button" data-bind="click: helloWorld" /> 

page.js:

var ViewModel = { 
    helloWorldVariable: ko.observable('test'), 
    helloWorld: function() { 
     this.helloWorldVariable('clicked!'); 
    } 
} 

// Bind viewmodel 

Quando il pulsante viene premuto, il div visualizzerà automaticamente "cliccato" . Questo, ovviamente, può essere utilizzato quando si recuperano informazioni dal server tramite richieste AJAX e non è necessario fare affidamento su ID di controllo/classi CSS. Possono cambiare in qualsiasi momento e il tuo codice è ancora pertinente.

Answer 4

Partenza Backbone.js. È un'impostazione MVC-ish molto popolare e flessibile per le app del browser JS. Il codice è ospitato su github.

Answer 5

Knockout JS potrebbe essere la pena dare un'occhiata, separa il modello di dati dal modello di vista e si prende cura delle dipendenze tra loro.