Day 3 如何看源码学习

返回目录

[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