Dove posizionare oggetti interattivi in ​​JavaScript?

Question

Sto creando un'applicazione basata sul Web (ad esempio JavaScript con jQuery e molto SVG) in cui l'utente interagisce con "oggetti" sullo schermo (pensa ai DIV che possono essere trascinati, ridimensionati e connessi da array - come un vettore programma di disegno o un linguaggio di programmazione grafica).

Poiché ogni "oggetto" contiene informazioni individuali ma è sempre appartenente a una "classe" di elementi è ovvio che questa applicazione deve essere programmata utilizzando un approccio OOP.

Ma dove memorizzo meglio gli "oggetti"?

• Devo creare una struttura globale ("Registro") con tutti i nativi (JS) oggetti e dire loro "disegnare se stessi sul DOM"?
• O dovrei evitare una simile struttura e pensare ai nodi DOM (rilevanti) come ai miei oggetti e collegare loro i dati rilevanti come .data()?

Il primo approccio è molto MVC, ma suppongo che l'allegato di tutti i gestori di eventi non sia banale.

Il secondo approccio gestirà gli eventi in modo semplice e non crea una struttura duplicata, ma suppongo che le solite cose OO (come i metodi) saranno più complesse.

Che cosa consigli? Penso che la risposta sarà specifica per JavaScript e SVG in quanto i "soliti" linguaggi di programmazione non hanno una "tela" di output così organizzata.

Answer 1

In tali circostanze in passato (ho colpito circa 5 volte) creo sempre OOP in JS ("classi" globali, strutture di dati non globali come appropriato). Ogni classe ha in genere una proprietà .g che punta alla sua rappresentazione grafica. (E prima di jQuery di .data Ho usato expando proprietà sulle istanze DOM che puntano al l'istanza della classe, quando i gestori di eventi o simili necessario per guardare dall'altra parte.)

anche io penso a questo come MVC, ma di Ovviamente è facile sfocare le linee (o essere difficili da tenerle separate) quando si dispone di un singolo interprete JS che sta memorizzando i modelli, agendo come controller e manipolando la vista.

Non trovo che l'aggiunta di gestori di eventi sia difficile in questo sistema: la creazione di istanze di un nuovo oggetto (nel codice) è responsabile dell'istanziazione della sua rappresentazione nella vista e del collegamento dei propri gestori di eventi che attivano i callback basati sull'istanza. Questo codice mappa eventi specifici dell'input (ad esempio mousedown) in eventi logici basati sullo stato (ad esempio selected).Altri registri di codice a questi eventi logici sulle istanze.

Answer 2

Vorrei usare JSON (come registro oggetti) e tenerlo tutto nel blocco di script. È quindi possibile memorizzare e recuperare facilmente i dati senza analisi.

Answer 3

Probabilmente vorrai usare JSON per definire gli "oggetti" con cui hai a che fare. ad es.

[{ 
    type: rectangle, 
    coordinates: {x: 0, y: 0}, 
    size: {width: 100, height: 100} 
},{ 
    type: arrow, 
    start: {x: 150, y: 150}, 
    end: {x: 100, y: 100} 
}] 

Ciò consente la flessibilità necessaria per disegnare le forme al caricamento della pagina, aggiornare lo stato degli oggetti come li stai manipolando, e salvare lo stato di essere caricato in un secondo momento.

Questo si imposta per utilizzare il pattern MVC come avete dichiarato e poi si può fare funzione di rilevamento per determinare se siete visualizzazione andando questo come Canvas, SVG, Flash, HTML, ecc