CaveDraw源码01：类的组织

在版本0.0.4中，使用prototype和闭包组织代码。考虑到以后要添加各种形状，笔刷，滤镜，代码复杂度提升，使用prototype和闭包模拟类系统比较累，所以学习了《JavaScript高级程序设计（第4版）》的第26 章 模 块，使用类来组织代码。

主类和组件类分工

board.js是Board主类。Board主类中有事件对象ev，用来作为各个组件的事件通讯。比如：Board主类通过触发事件board:reset，调用各个Controller类的onBoardReset()。

Board主类中的controllers属性中保存着controller集合，this.controllers[name] = controller;身上还挂载着controller。shapes也是一样。

Board主类中保存着绘图环境context，绑定了鼠标事件。在鼠标事件中调用当前的shape进行绘图。且BrushBtn中点击事件，会切换当前shape。

组件之间的通信

组件之间的通信是通过Board主类中的事件对象ev。比如：BrushBtn中点击事件，会切换当前的激活按钮。每个按钮监听事件btn:change来改变当前的激活状态，这个方法写进了父类。

btnChange() {
    return (ctrl) => {
        if (this === ctrl) {
            // 貌似有toggle函数，不必喷。本文主题是教学
            if (!this.btn.classList.contains('active')) {
                this.btn.classList.add('active');
            }
        } else {
            if (this.btn.classList.contains('active')) {
                this.btn.classList.remove('active');
            }
        }
    }
}

利用响应式函数和UI解耦

因为vue的启发，又不想引入vue，实现了一个simpleReactive.js，用来解耦UI。比如：OpenBtn类中，只需操作this.ret.show的值，就可以显示或隐藏cavans元素。