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).¿Dónde colocar objetos interactivos en JavaScript?
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.
Esperaré las respuestas porque esta pregunta es muy interesante ... pero ¿por qué eligió SVG en lugar de ir por el lienzo y un enfoque más "tradicional" de simplemente tener objetos dibujándose en el lienzo? – 6502
Elegí SVG sobre Canvas porque mis datos son de vector y no de tipo de píxel. Y, lo que es más importante, estoy usando mucho los eventos de JavaScript (mousedown, mousemove, ...) y como puedo vincularlos a los elementos SVG estoy descargando la "detección de colisión" a la implementación nativa del navegador y don no tengo que hacerlo yo solo en (potencialmente lento) JavaScript – Chris