6

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

2
  • I'll wait for replies because this question is IMO very interesting... but why did you chose SVG instead of going for canvas and a more "traditional" approach of simply having objects drawing themselves on the canvas ?
    – 6502
    Dec 30, 2010 at 18:23
  • 2
    I chose SVG over Canvas as my data is of vector and not of pixel type. And, even more important, I am using the JavaScript events (mousedown, mousemove, ...) a lot and as I can bind them to the SVG elements I am offloading the "collision detection" to the native implementation of the browser and don't have to do it myself in (potentially slow) JavaScript
    – Chris
    Dec 30, 2010 at 21:56

3 Answers 3

2

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.

1
  • Thanks for the very informative answer. I think I'll go that way now :)
    – Chris
    Jan 1, 2011 at 13:19
1

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.

1
  • Yup, JSON is already set as this application is heavily working together with an server side backend and communicating via AJAX and is sometimes using the COMET pattern - so JSON is a natural choice
    – Chris
    Jan 1, 2011 at 13:16
1

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.

1
  • To better relate my answer to your question: I am suggesting you go with your first point: "Should I create a global structure ("registry") with all (JS native) objects and tell them "draw yourself on the DOM"?" - My reasoning being as stated below the code block in my answer.
    – nedk
    Dec 30, 2010 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.