Scratch底层架构源码分析

第1章 开始Scratch之旅 1

1.1 Scratch概述 1

1.1.1 Scratch发展历史 1

1.1.2 Scratch技术生态 2

1.1.3 Scratch使用现状 2

1.1.4 Scratch源码分析的意义 2

1.2 Webpack打包工具简介 3

1.2.1 Webpack的核心概念 3

1.3 NPM包管理工具简介 4

1.3.1 NPM的组成 4

1.3.2 NPM的使用场景 4

1.4 小结 5

第2章 Scratch-blocks：积木块源码分析 6

2.1 Scratch-blocks概述 6

2.1.1 Blockly技术简介 6

2.1.2 Scratch-blocks与Blockly之间的关系 8

2.1.3 Scratch-blocks的作用 9

2.1.4 Scratch-blocks的分类 9

2.2 Scratch-blocks代码结构与流程 9

2.2.1 Scratch-blocks代码结构 10

2.2.2 Scratch-blocks代码流程 12

2.3 Scratch-blocks核心代码分析 14

2.3.1 blockly_uncompressed_vertical.js：垂直方向的非压缩打包文件 14

2.3.2 options.js：配置工作区 17

2.3.3 inject.js：将Scratch-blocks注入页面 19

2.3.4 workspace模块：工作区 28

2.3.5 toolbox.js：工具箱 34

2.3.6 Flyout模块：工具箱中的托盘 38

2.3.7 xml.js：XML读写器 46

2.3.8 event模块：各模块之间的通信 54

2.3.9 Field模块：代码块上的域 63

2.3.10 blockly.js：Blockly的核心JS库 75

2.3.11 connection模块：代码块之间的连接 81

2.3.12 input.js：代码块上的输入 94

2.3.13 mutator.js：代码块的变形器 97

2.3.14 extensions.js：代码块的扩展 102

2.3.15 block.js：定义一个代码块 105

2.4 小结 120

第3章 Scratch-vm：虚拟机源码分析 121

3.1 Scratch-vm概述 121

3.1.1 Scratch-vm的职责 121

3.2 Scratch-vm代码结构与流程 122

3.2.1 Scratch-vm代码结构 122

3.2.2 Scratch-vm代码流程 123

3.3 Scratch-vm核心代码分析 129

3.3.1 virtual-machine.js：*外层的API定义 129

3.3.2 blocks模块：代码块原语的实现 138

3.3.3 dispatch模块：消息派发系统 151

3.3.4 engine模块：虚拟机的引擎 155

3.3.5 serialization模块：序列化与反序列化 188

3.3.6 sprite模块：精灵的渲染 196

3.4 小结 199

第4章 Scratch-render：渲染引擎源码分析 200

4.1 Scratch-render渲染技术概述 200

4.1.1 WebGL概述 200

4.1.2 canvas概述 201

4.1.3 twgl.js概述 201

4.1.4 Scratch-render概述 201

4.2 Scratch-render代码结构与流程 202

4.2.1 Scratch-render代码结构 202

4.2.2 Scratch-render代码流程 203

4.3 Scratch-render核心代码分析 211

4.3.1 twgl.js关键函数介绍 212

4.3.2 RenderWebGL.js：渲染引擎*外层API的定义 219

4.4 小结 227

第5章 Scratch-storage：资源存储源码分析 228

5.1 Scratch-storage概述 228

5.1.1 什么是Scratch-storage 228

5.1.2 Scratch-storage的主要内容 229

5.2 Scratch-storage代码结构与流程 229

5.2.1 Scratch-storage代码结构 229

5.2.2 Scratch-storage代码流程 230

5.3 Scratch-storage核心代码分析 239

5.3.1 ProxyTool模块：网络代理工具 239

5.3.2 FetchTool模块：基于Fetch的网络工具 240

5.3.3 NetsTool模块：基于Nets的网络工具 241

5.3.4 FetchWorkerTool模块：基于任务的网络工具 241

5.4 小结 245

第6章 Scratch-gui：图形化界面源码分析 246

6.1 Scratch-gui概述 246

6.1.1 Scratch-gui所处的位置 246

6.1.2 Scratch-gui的主要内容 247

6.2 React技术栈概述 247

6.2.1 什么是React 247

6.2.2 React关键技术 248

6.2.3 什么是Redux 249

6.2.4 react-redux介绍 249

6.3 Scratch-gui代码结构与流程 250

6.3.1 Scratch-gui代码结构 250

6.3.2 Scratch-gui代码流程 251

6.4 Scratch-gui核心代码分析 261

6.5 小结 275

第7章 Scratch生态其他项目 276

7.1 Scratch-paint：绘图编辑器 276

7.1.1 Scratch-paint目录结构 276

7.1.2 Scratch-paint使用方法 277

7.2 Scratch-audio：音频引擎 279

7.2.1 Scratch-audio目录结构 280

7.2.2 Scratch-audio在Scratch-gui中的使用 280

7.3 Scratch-parser：解析验证工具 283

7.3.1 Scratch-parser目录结构 283

7.3.2 Scratch-parser在Scratch-vm中的使用 283

7.4 小结 284