Javascript facade pattern never showing initial settings

Question

The Explanation

I'm implementing my first attempt at the Javascript facade design pattern and I'm having a little difficulty. Essentially my goal is to create a central controller with which I can add multiple graphs to, each with their own unique settings, and each with the ability to modify each other's settings via communication with the central controller. The issue is that after I set up the controller and add to it two bar graphs with their default settings, when I inspect the objects both before and after the width() and height() functions are called, the values appear as changed.

The Question

I would expect that the first time you would call console.log(cont.list()); it would tell me that your-bar has a width of 300 and a height of 100. Of course, the next line bar2.width(500).height(200); should change those settings (and it does), but why does it also change it on the first console.log()?

The Code

ge = (function() {
    var ge = {
        version: '1.0'
    };

    ge.controller = function(_controller) {
        if(_controller === undefined)
            _controller = {};

        var _graphs = {};

        _controller.addGraph = function(graph) {
            _graphs[graph.name] = graph;
        };

        return {
            add: function(graph) {
                _controller.addGraph(graph);
                return this;
            },
            list: function() {
                return _graphs;
            }
        };
    };

    ge.verticalBarGraph = function(_graph) {
        _graph.width = function(width) {
            _graph.width = width;
            return this;
        };

        _graph.height = function(height) {
            _graph.height = height;
            return this;
        };

        return _graph;
    };

    return ge;
})();

var cont = ge.controller({
    name: "dat-controller"
});

var bar1 = ge.verticalBarGraph({
    name: "my-bar",
    width: 100,
    height: 200
});

var bar2 = ge.verticalBarGraph({
    name: "your-bar",
    width: 300,
    height: 100
});

cont.add(bar1).add(bar2);
console.log(cont.list());

bar2.width(500).height(200);

console.log(cont.list());

The Resources

• Le jsfiddle

The Greater Question

Am I even on the right track? I suppose such answers get dogmatic and any reply would be purely conjecture. However I want to know, given my previous explanation, am I doing this the right way the first time? I'm about to spend the next few weeks expanding this code base to thousands of lines of code and I want to make sure I'm creating a system which is private (or as private as Javascript can possibly be) but also allows all the graphs to talk to each other. In other words, when the data of one of them changes, the rest should react accordingly. I'm getting my inspiration from the dc.js library, but I'm dissatisfied with being forced to hack my graphs to fit the established visual style I need to inevitably meet.

Answer 1

If you replace your

console.log(cont.list());

with

console.log(JSON.stringify(cont.list()));

you will see that the width and height are not set until the second call. The way your are inspecting the console log above must be showing you the current value of the logged object... whereas serializing the object using JSON.stringify will take a snapshot of what it was at that point.

As far as the other question goes, I'd suggest that perhaps you'd be better off forking from DC.JS and changing what you don't like about the style. The DC.JS approach to mixins seems to work nicely and you shouldn't need to completely reinvent the structure of the code.