Where to place interactive objects in JavaScript?

I'm creating a web based application (i.e. JavaScript with jQuery and lots of SVG) where the user interacts with "objects" on the screen (think of DIVs t开发者_运维技巧hat can be draged around, resized and connected by arraows - like a vector drawing programm or a graphical programming language).

As each "object" contains individual information but is allways belonging to a "class" of elements it's obvious that this application should be programmed by using an OOP approach.

But where do I store the "objects" best?

• Should I create a global structure ("registry") with all (JS native) objects and tell them "draw yourself on the DOM"?
• Or should I avoid such a structure and think of the (relevant) DOM nodes as my objects and attach the relevant data as .data() to them?

The first approach is very MVC - but I guess the attachment of all the event handlers will be non trivial.

The second approach will handle the events in a trivial way and it doesn't create a duplicate structure, but I guess the usual OO stuff (like methods) will be more complex.

What do you recomend? I think the answer will be JavaScript and SVG specific as "usual" programming languages don't have such a highly organized output "canvas".

In such circumstances in the past (I've hit this about 5 times) I always create OOP in JS (global "classes", non-global data structures as appropriate). Each class typically has a .g property that points to its graphical representation. (And before jQuery's .data I used expando properties on the DOM instances pointing back to the class instance, when event handlers or the like needed to look the other way.)

I too think of this as MVC, but of course it's easy to blur the lines (or hard to keep them separate) when you have a single JS interpreter that is storing your models, acting as controller, and also manipulating the view.

I don't find that adding event handlers is hard under this system: instantiating a new object (in code) is responsible for instantiating its representation in the view, and attaching its own event handlers that trigger instance-based callbacks. This code maps input-specific events (e.g. mousedown) into logical events based on state (e.g. selected). Other code registers to these logical events on the instances.

I would use JSON (as an object registry) and keep it all in your script block. You can then easily store and recover the data without parsing.

You would probably want to use JSON to define the "objects" you're dealing with. e.g.

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

This allows you the flexibility to draw the shapes on page load, update the state of the objects as you're manipulating them, and save the state to be loaded again later.

This sets you up to use the MVC pattern as you stated and then you can do feature detection to determine if you're gonna display this as Canvas, SVG, Flash, HTML, etc.