当前位置: 首页 > Web前端 > HTML

看了网上一个excel的源码

时间:2023-04-02 18:25:18 HTML

,发现设计还是很有意思的:整个表格都是用canvas绘制的,按照作者的说法是为了性能。canvas上方有一个看不见的table层,内部的col、row、cell、canvas都是1:1复制的,给无障碍用户。最上层是overlay,用于响应所有的鼠标和键盘事件,在用户操作后更新到下层canvas。这一层非常复杂。它必须处理单击、拖动和编辑单元格的各种浮动组件。然后看了下腾讯的在线表格。也是类似的结构(只是没有无障碍层)。记录下组件架构,总结一些经验:对于复杂的鼠标点击和拖动处理,一般需要监听全局事件,然后根据坐标判断响应,而不是监听一些小组件。这种写法影响性能,如果是经常变化的组件,可以手动展开里面的props。react.d.ts定义了一些官方没有的定义,比如React.ForwardRefRenderFunction,需要在@types中找到。单元格的同步,推测还是单元格编辑独享)Excel的公式能力在线协作系统还是很复杂