Javascript门面模式从不显示初始设置

Question

解释

我实现了Javascript外观设计模式的第一次尝试，我遇到了一些困难。基本上我的目标是创建一个中央控制器，我可以使用它来添加多个图形，每个图形都有自己独特的设置，每个图形都可以通过与中央控制器的通信来修改彼此的设置。问题是，在我设置控制器并添加两个条形图及其默认设置后，当我在调用width()和height()函数之前和之后检查对象时，值出现改变了。

问题

我希望您第一次拨打console.log(cont.list());时会告诉我your-bar的{​​{1}}为300，width为100。当然，下一行height应该更改这些设置（确实如此），但为什么它也会在第一个bar2.width(500).height(200); 上更改？

守则

console.log()

资源

• Le jsfiddle

更大的问题

我是否走在正确的轨道上？我认为这样的答案会变得教条，任何答复都纯粹是猜想。但是我想知道，鉴于我之前的解释，我是第一次以正确的方式做到这一点吗？我将在接下来的几周内将此代码库扩展到数千行代码，并且我想确保创建一个私有的系统（或者像Javascript一样私有）但是还允许所有图表相互通信。换句话说，当其中一个数据发生变化时，其余数据应作出相应的反应。我从dc.js library获得灵感，但我不满意被迫破解我的图形以适应我不可避免地遇到的既定视觉风格。

Answer 1

如果您更换

console.log(cont.list());

带

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

您将看到在第二次调用之前未设置宽度和高度。检查上面的控制台日志的方式必须显示已记录对象的当前值...而使用JSON.stringify序列化对象将获取该点的快照。

就另一个问题而言，我建议也许你最好不要从DC.JS分叉并改变你不喜欢的风格。对mixin的DC.JS方法似乎运行良好，你不需要完全重新发明代码的结构。