[Git: https://gitee.com/zhouweng/mini_sheet version=a831922b7d8fff67d11db87da55911f988f63011]
0.基础知识点:git回滚版本、visual studio code文件中查找关键字
1.git工具回滚版本
如果不知道如何拉取项目源代码可以看这里, 回滚方法参考网上资源,命令行两句话:
查看提交的ID信息
# git log
回滚到对应的版本
# git reset --hard [ID]
2.MiniSheet项目结构
[Git version=a831922b7d8fff67d11db87da55911f988f63011]
MiniSheet
│ gulpfile.js gulp配置文件
│ package.json npm配置文件
│
├─dist 编译目标目录(直接部署tomcat运行)
│
├─node_modules 支持库目录(好多文件)
│
└─src
│ config.js sheet默认参数
│ core.js sheet创建方法
│ index.html 页面文件
│ index.js
│
├─controllers 交互相关目录
│ constant.js HTML元素定义
│ resize.js 设置sheet窗体大小
│ sheetmanage.js 初始化sheet数据加载
│ sheetSearch.js 可见单元格定位
│
├─css 页面样式库目录
│
├─global 公共方法目录
│ createdom.js 创建HTML dom并设置大小
│ draw.js 通过H5 canvas绘制页面(这个很关键)
│ getdata.js 获取数据
│ loading.js 页面加载的进度条
│ refresh.js 刷新文件
│ rhchInit.js 设置可见单元格的尺寸
│ scroll.js 全局滚动事件(这个版本用不上)
│ setdata.js 设置数据
│ validate.js 数据校验方法
│
├─plugins 插件库目录
│
├─store
│ index.js 全局变量
│
└─utils 公共方法目录
util.js 公共方法函数库
3.页面加载流程
在Javascript里面,在.js文件编写程序逻辑,流程说明的格式为:调用层次|文件名|功能说明
index.html: 调用core.js luckysheet.create(),其中表格参数data;
->core.js:合并配置项 ( ./config.js 和 data from index.html)
->core.js:调用sheetmanage.initialjfFile() 页面初始化展现
-->sheetmanage.js: 生成Store全局变量数据
-->sheetmanage.js:调用createdom.luckysheetcreatedom()生成页面dom
--->createdom.js:调用constant.gridHTML()获取网格的主界面HTML字符串
--->createdom.js:调用rhchI.rhchInit()生成Store的可见表格区域visibledatarow及高宽rh_height/ch_width
--->createdom.js:页面dom加载并设置元素的宽高;
--->createdom.js:调用resize.luckysheetsizeauto()刷新页面
---->resize.js:设置元素的宽高(是否可以和createdom.js相关功能合并);
---->resize.js:调用refresh.luckysheetrefreshgrid()刷新页面;
----->refresh.js:调用draw.luckysheetDrawMain() 刷新 cell-main单元格主框体
----->refresh.js:调用draw.luckysheetDrawgridColumnTitle() 刷新单元格列标题
----->refresh.js:调用draw.luckysheetDrawgridRowTitle() 刷新单元格行标题
资源:
git回滚版本: https://www.jianshu.com/p/017f7416cda3
tree生成文件夹目录结构: https://baijiahao.baidu.com/s?id=1642352617499836657&wfr=spider&for=pc