概述
潜心闭关了两个月做 Scratch3.0 二次开发，无奈资料太少，几乎只能硬啃源码。不过还好，一点点啃下来，总算有点成果，接下来打算把过程中遇到的问题、实现的功能整理出来，做一个系列，希望给接下来做 Scratch3.0 二次开发的同学多一份参考（内容不一定 100%正确，有 bug 欢迎指出 Thanks♪(･ω･)ﾉ）
后续系列打算以功能点作为参考，按功能实现梳理实现细节。二开的源码会整理到下面的 Demo 项目中
思路 & 参考
别急，要拿下一个几乎 “0 文档” 的开源项目，个人觉得比较重要的是慢慢捋顺里面的逻辑关系以及设计思路，尽可能从作者的角度去思考怎样做？为什么这样做？
太急的话可能会留很多坑，毕竟同一个功能写在 A处 可以、写在 B处也可以，但如果这种情况写多了，一旦没有跟着原本项目的“逻辑线”去写，很容易乱成一团，后续其他成员接手时可能会更懵。
有一说一，在下就是那个“其他成员”，我们内部定义这期做的版本是 3.0，之前的 2.0（也是在 Scratch3.0 上二开） 已经过了好几年，这期业务端想优化优化（加需求），无奈之前 2.0 实在太乱，既没有官方库的文档，又没有我们自己二开后的文档，后来果断直接重构，推翻重来。为了不让下一位接手的成员成为“其他成员”，只能自己花更多时间去上手、去入门、去梳理，希望可以前人栽树后人乘凉~
回到正题上，整个项目下来，我自己用得比较上手的思路主要有三条：
- 从需求出发，找线索，把线索串联起来、快速试错
- 多看几个核心库的入口文件中的内容（时不时可以找到有用的函数或属性）
- 翻 《Scratch 底层架构源码分析》，慢慢跟上项目的设计思路（建议找电子版，可以直接搜索的那种）
Demo 项目准备
项目地址
- demo-scratch-gui
- 对应官方的 scratch-gui
- demo-scratch-blocks
- 对应官方的 scratch-blocks
- demo-scratch-render
- 对应官方的 scratch-render
- demo-scratch-svg-renderer
- 对应官方的 scratch-svg-renderer
- demo-scratch-vm
- 对应官方的 scratch-vm
上述几个带 demo- 前缀的项目都是从官方项目上 download 下来，再另做修改的项目，最好 5 个项目都 clone 下来，在做后续功能时都会涉及到
PS：本地开发会用到 npm 的 link 来串联上面几个项目，具体用法可以百度一下
环境
- node：v14.17.6
- java：要有 JDK8
- python：2.7.14
- closure-library：下载地址
- 在 demo-scratch-blocks 项目同级目录下需要有一个closure-library 文件夹（从上面下载地址上下载下来，放在与 demo-scratch-blocks 项目同级目录下即可）
PS：上述 2、3、4的环境都是为 demo-scratch-blocks 项目准备的，没有这三个环境的话，没法跑 demo-scratch-blocks 项目
功能清单
- 舞台区域支持多尺寸模式
- 官方舞台支持 480*360（4:3）的比例，但实际业务做的游戏会有竖屏、16:9 的需要，所以需要扩展舞台支持的比例
- 增加网格标尺功能
- 在舞台上画一个直角坐标系，方便用户准确摆放角色位置
- 支持隐藏积木选择区域
- 官方积木选择区域不可隐藏，如果将项目移植到移动端会很占位置，所以增加这个隐藏积木选择区域的功能
- 支持在积木选择区域显示超长积木块
- 官方积木选择区域，对于超长的积木采用隐藏策略，不太方便查看，所以加了这个功能
- 增加积木删除区域的标识交互
- 官方拖拽删除积木的标识不是很明显，这里做了优化
- 增加积木的完全锁定、隐藏积木、禁止删除功能，增加角色一键隐藏功能
- 这个是教学场景，老师在做一些模板作品时可能内容会很复杂，但是希望给到同学一个比较"干净"的界面，所以加上这个功能
- 引入 dva 简化数据管理的操作
- 按需修改 webpack 配置
- 。。。
