Javascript Facade模式從不顯示初始設置

Question

說明

我正在嘗試用Javascript門面設計模式進行第一次嘗試，但遇到了一些困難。 本質上，我的目標是創建一個中央控制器，可以向其中添加多個圖形，每個圖形都有自己獨特的設置，並且每個圖形都可以通過與中央控制器通信來修改彼此的設置。 問題是，在我設置了控制器並將其默認設置添加到兩個條形圖之后，當我在調用width()和height()函數之前和之后檢查對象時，這些值顯示為已更改。

問題

我希望您第一次調用console.log(cont.list()); 它會告訴我， your-bar的width為300， height為100。當然，下一行bar2.width(500).height(200); 應該更改這些設置（確實如此），但是為什么還要在第一個console.log()上更改它 ？

編碼

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());

資源

• Le jsfiddle

更大的問題

我是否在正確的軌道上？ 我想這樣的答案是教條的，任何答復都將純粹是推測。 但是，我想知道，鑒於我之前的解釋，我是第一次正確地這樣做嗎？ 我將在接下來的幾周內將這個代碼庫擴展到數千行代碼，並且我想確保自己創建的系統是私有的（或者像Javascript一樣私有），但也允許所有圖互相交談。 換句話說，當其中之一的數據發生更改時，其余的應該相應地做出反應。 我從dc.js庫中得到了啟發，但對於被迫破解我的圖形以適應不可避免地需要建立的視覺樣式，我感到不滿意。

Answer 1

如果您更換

console.log(cont.list());

同

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

您將看到直到第二次調用才設置寬度和高度。 檢查上面的控制台日志的方式必須向您顯示已記錄對象的當前值...而使用JSON.stringify序列化對象將獲得當時的快照。

至於另一個問題，我建議您最好從DC.JS分叉並更改您不喜歡的樣式。 DC.JS的混合方法似乎很好用，您不需要完全重新編寫代碼的結構。