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 that 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".