¿Dónde colocar objetos interactivos en JavaScript?

Question

Estoy creando una aplicación basada en web (es decir, JavaScript con jQuery y gran cantidad de SVG) donde el usuario interactúa con "objetos" en la pantalla (piense en DIV que se pueden arrastrar, cambiar de tamaño y conectar por arrays, como un vector programa de dibujo o un lenguaje de programación gráfica).

Como cada "objeto" contiene información individual, pero siempre pertenece a una "clase" de elementos, es obvio que esta aplicación debe programarse utilizando un enfoque OOP.

Pero, ¿dónde guardo los "objetos" mejor?

• ¿Debo crear una estructura global ("registro") con todos los objetos (JS nativos) y decirles "dibujen en el DOM"?
• ¿O debería evitar esa estructura y pensar en los nodos DOM (relevantes) como mis objetos y adjuntar los datos relevantes como .data() a ellos?

El primer enfoque es muy MVC, pero supongo que la conexión de todos los controladores de eventos no será trivial.

El segundo enfoque manejará los eventos de una manera trivial y no creará una estructura duplicada, pero supongo que las cosas habituales de OO (como los métodos) serán más complejas.

¿Qué es lo que recomiendas? Creo que la respuesta será JavaScript y SVG específicos ya que los lenguajes de programación "habituales" no tienen un "lienzo" de salida tan organizado.

Answer 1

En tales circunstancias en el pasado (he acertado esto unas 5 veces) siempre creo OOP en JS ("clases" globales, estructuras de datos no globales, según corresponda). Cada clase tiene típicamente una propiedad .g que apunta a su representación gráfica. (Y antes de jQuery de .data que utilizan expando propiedades en los casos de DOM que apuntan de nuevo a la instancia de clase, cuando los controladores de eventos o similares necesaria para mirar hacia otro lado.)

yo también pienso en esto como MVC, pero de Por supuesto, es fácil difuminar las líneas (o es difícil separarlas) cuando tienes un solo intérprete JS que almacena tus modelos, actúa como controlador y también manipula la vista.

No creo que la adición de controladores de eventos sea difícil en este sistema: la instancia de un nuevo objeto (en código) es responsable de instanciar su representación en la vista y adjuntar sus propios manejadores de eventos que desencadenan devoluciones de llamada basadas en instancia. Este código mapea los eventos específicos de la entrada (por ejemplo, mousedown) en eventos lógicos basados ​​en el estado (por ejemplo, selected).Otro código se registra en estos eventos lógicos en las instancias.

Answer 2

Usaría JSON (como registro de objetos) y lo mantendría todo en el bloque de scripts. A continuación, puede almacenar y recuperar fácilmente los datos sin analizarlos.

Answer 3

Es probable que desee utilizar JSON para definir los "objetos" con los que está tratando. p.

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

Esto le permite la flexibilidad para dibujar las formas de carga de la página, actualizar el estado de los objetos a medida que los está manipulando, y guardar el estado para ser cargado de nuevo más tarde.

Esto te prepara para utilizar el patrón MVC como ha afirmado y luego se puede hacer la detección de características para determinar si vas a la pantalla esto como lienzo, SVG, Flash, HTML, etc.