Question

I think the best way to ask my question is by giving an example.

In JavaScript, imagine the following scenario:

function Tab(options) {
    this.options = options;
}

Tab.prototype.doSomething = function () {
    if(...) {
        // Change tab1's options
        //tab1.disabled = true
    } else {
        // Change tab2's options
        //tab2.disabled = true
    }
    // Call a method on of mySlider instance (NOT myOtherSlider instance)
    //mySlider.helloWorld();
}

// Slider class
function Slider(options) {
   ....
}

Slider.prototype.helloWorld = function () {

    ...
    // Access tab1's properties
    // tab1.disabled should be "TRUE" since it was changed previously

    // Access tab2's properties
    ...
}

function Accordion() {
    this.name = 'accordion';
    var tab1          = new Tab({disabled: true}),
        tab2          = new Tab({disabled: false),
        mySlider      = new Slider({color: red}),
        myOtherSlider = new Slider({color: blue});
}

Pretty much I would like all the classes to be aware of the objects that has been instantiated in their own class as well as other classes.

The important part is for the instances to be synchronized. For example, a change to tab1’s properties should be applied/visible to any other objects accessing tab1.

---

I managed to answer my own question by using an object manager class:

function ObjectManager () {
}

ObjectManager.objects = {};

ObjectManager.register = function (name, object) {
    var t = this;
    t.objects[name] = object;
}

ObjectManager.getObject = function (name) {
    var t = this;
    return t.objects[name];
}

function Tab () {
    this.name = 'tab object';
}

Tab.prototype.init = function (name) {
    var t = this;
    t.name = name;
}

Tab.prototype.changeProperty = function () {
    var tab1 = ObjectManager.getObject('tab1');
    tab1.name = 'changed tab1 name';
}

function Accordion() {
    var tab1 = new Tab();
    tab1.init('tab number 1');

    var tab2 = new Tab();
    tab2.init('tab number 2');

    ObjectManager.register('tab1', tab1);
    ObjectManager.register('tab2', tab2);
    console.log(ObjectManager.objects);
    tab2.changeProperty();
    console.log(ObjectManager.objects);
    console.log(tab1.name);
}

var accordion = new Accordion();​

Though I am not sure how efficient this solution is, but it gets the job done.

Answer 1

There are many different approaches to this problem. Let me explain two common patterns:

1. The observer pattern. Each object which needs to be informed about changes in other objects (“observer”), is passed to the “register” method of the objects it needs to be informed about (“observed”). The observed object keeps an internal array of all observers which registered for it. The observed also registers handlers for all relevant input events on the DOM element it represents (onclick, onchange etc). When the observed is changed, it informs all observers by calling a common method in them.

2. The controller pattern. All objects are managed by a central controller object. The controller keeps arrays of all objects which need to be managed. All input events are handled by the controller. When an input event occurs, it determines which objects need to be changed because of this event and changes them.