Day 5 第一个最小化系统

返回目录

[Git:  https://gitee.com/zhouweng/mini_sheet  version=a831922b7d8fff67d11db87da55911f988f63011]

 

第一个最小化系统看起来比较简陋，启动系统后（启动方法参考：[Day 2 Win10系统配置开发环境](https://blog.csdn.net/u010593516/article/details/113743156)），浏览器只显示下面这个简单的表格。

裁剪过程，耗费了我两周时间，通过裁剪，对luckysheet的系统架构也有了比较清晰的认识，具体裁剪方法，未来可能专题讲一讲，还是有不少小技巧值得分享。目前最小化系统的JS代码量1500行左右（样式css文件和插件plugins目录没有进行裁剪）

 

最小系统的核心逻辑包括提取合并表格数据、构建dom元素、绘制页面等三个部分

0.基础知识：

js的 import / export

H5 CSS : .append() / .width() / .height() / .css()/.attr()/ .fadeOut()/.scrollLeft()/.scrollTop()/

H5 canvas 绘制线段：.beginPath() / .moveTo() / lineTo() / stroke() / closePath() 

1.提取合并表格元素

    网络表格最终的数据交互方式是通过websocket方式，在demo里面，数据来源包括以下几部分：

1)./index.html:通过向luckysheet.create()传递 json格式的参数方式，优先级最高，覆盖以下的配置文件;

2)./config.js: 默认的表格配置参数，当luckysheet.create()没有相应配置项，则从这个文件提取配置数据;

3)store/index.js:这个文件除了初始化参数外，还包含了运行时的全局变量，未来大量的界面绘制和交互会用到这个文件;

    core.js通过 util.common_extend()把 1)和2)的配置数据合并，这个公共函数可以学习使用

 

2.构建dom元素

1)./controllers/constant.js: 这个文件包含了HTML dom的定义;

2)./global/createdom.js: 提取和组装dom元素并设置高和宽;

 

3.界面绘制

draw.js使用H5的canvas绘制界面，调用顺序如下：sheetmanage.js->resize.js->refresh.js->draw.js

draw.js是这个最小化系统最复杂的一个文件，代码量500+，包含了三个部分：绘制列标题、绘制行标题、绘制表格区，

其中绘制表格区，包含了空白表格和包含内容表格的绘制方法。