CaveDraw源码01:类的组织

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

主类和组件类分工

board.jsBoard主类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元素。

Copyright © 2022,枫糖, 版权所有,禁止转载、演绎、商用。
离开前,建议您浏览一下 归档 页面,或许有更多相关的、有趣的内容!
如需博主帮助,请转到 小卖铺 页面,购买手工活服务!

添加评论

code

目录