Elegant way to notice JavaScript object attribute changes

Question

I am working on a JavaScript application with a server-side component. The aim is to have multiple different objects on a canvas that are synchronized (i.e., have the same appearance) between multiple browsers. The synchronization is done by the server-side component which broadcasts the individual changes to all browsers. Whenever an object changes, it has to notify the server about which will then take care of notifying the other browsers.

The objects on the canvas are represented by JavaScript objects whose attributes determine the appearance for the user. Of course, not all of the attributes are important for the appearance. Hence, only changes of important attributes have to be transmitted to the other browsers. There are different 'classes' of objects, but all objects 'inherit' from a common 'superclass' (I know, the class inheritance terminology doesn't really work in JavaScript, but in this case, I think it is easier that way).

Now, I have some trouble to send the client-server notifications in an elegant way. Currently, I have setter-methods for all the important attributes of the different objects. These setter-methods call a function which sends the notifications to the server.

I don't really like that solution, since it introduces much boilerplate code. Ideally, when I create a new object, I would like to be able to just specify the important attributes an be done with it. The logic that takes care of monitoring the changes of these attributes could be inside the 'superclass'. But I have no idea how to implement this. Maybe there is a way to build the setters dynamically at runtime? Or maybe there is some other way I did not think about?

If anyone can think of a solution to this problem, I would be glad to hear about it.

Thanks in advance!

Edit:

I had to revoke the accepted answer (creating getters and setters dynamically via Object.defineProperty) since though I thought it would solve my problem, it doesn't really. I now get notified when a property is changed via direct attribute assignment which fires the setter, e.g.:

SynchronizedObject.importantProp = 'someValue';

But as I noticed, in many cases the importantProp is some more complex object. And those objects are usually updated via the getter, not the setter.

SynchronizedObject.importantProp.x = 'someValue';

As far as I can see, I have no chance to notice changes done in this way with my dynamic getters/setters implementation. To use it, I have to change the way I am accessing my objects. Something that works:

prop = SynchronizedObject.importantProp;
prop.x = 'someValue';
SynchronizedObject.importantProp = prop;

That way, the setter is used and everything works out fine. But this feels really awkward and I don't want to have to think about the synchronization every time, I set a property. So it seems to me, the solution is not really usable.

Can anyone help?

When you say "setter methods", do you mean just another function, or real accessors? Would you be okay with Object.defineProperty? Older browsers not supported, but you're already using canvas... — bfavaretto
– bfavaretto, Commented Mar 8, 2013 at 17:59

josh3736 · Accepted Answer · 2013-03-08 17:53:42Z

2

How about one set function?

MyObj.prototype.set = function(key, value) {
    this[key] = value;
    // do other things
};

You could combine this with an EventEmitter implementation to make it easy to observe changes.

answered Mar 8, 2013 at 17:53

josh3736

146k34 gold badges227 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ross Patterson · Accepted Answer · 2013-03-08 23:04:54Z

1

This is exactly what __defineSetter()__ is intended to support. Check out John Ressig's JavaScript Getters and Setters blog post for some good examples. It would be pretty simple to fire off an event from inside a setter.

answered Mar 8, 2013 at 23:04

Ross Patterson

9,59936 silver badges51 bronze badges

1 Comment

bfavaretto Over a year ago

That's deprecated, you should use Object.defineProperty instead.

Peter Lyons · Accepted Answer · 2013-03-08 17:56:09Z

0

You may want to consider the MeteorJS framework if wheel reinvention is not really your bag.

answered Mar 8, 2013 at 17:56

Peter Lyons

147k32 gold badges285 silver badges281 bronze badges

Collectives™ on Stack Overflow

Elegant way to notice JavaScript object attribute changes

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related