Scratch底层架构源码分析

截至目前，全球已经有超过150个国家和地区的人在使用Scratch。Scratch被翻译成了40多种语言。作为一种可拖曳、图形化的编程语言，它已经深入人心。

Scratch不仅是一个学习工具，从更加广泛的意义上来说也是教育的一部分。国内外目前正在掀起一波Scratch教学和研究的热潮。就国内而言，基于Scratch的少儿编程教育发展得已经非常成熟，许多公司和科研机构纷纷进入该领域，并推出了自己的产品和研究成果，此外，基于Scratch的论文、图书、论坛、会议及竞赛也非常多。

在这样的大环境下，Scratch技术开发人员越来越受到相关教学和培训机构的青睐，就业市场方面对Scratch技术人才的需求量也在逐年增加。可以说，Scratch技术人员必将是未来的一大人才缺口，因此掌握Scratch技术对于社会和个人而言都具有非常重要的意义。

笔者是在2018年开始接触Scratch技术的。刚开始笔者还只是停留在Scratch语言的使用层面，并没有深入了解其内部的实现原理。2019年，笔者真正开始参与Scratch技术开发工作，当时有幸加入了一家名为“核桃编程”的少儿编程教育公司，基于Scratch开源项目做二次开发，推出了相关的编程教育产品。

在从事Scratch开发工作期间，笔者被其强大的功能深深地吸引，决心要深入理解它的实现原理。但是在实践过程中，笔者发现国内已经出版的图书都是介绍Scratch如何使用的，还没有一本是介绍Scratch语言的底层架构技术与实现的，而且互联网上几乎没有相关资料，想要深入学习，只有阅读Scratch的底层实现源码这一个途径。另外，Scratch的底层源码注释也很不完善，阅读门槛很高。于是笔者就有了编写一本介绍Scratch底层源码图书的想法，希望给后来者提供一点帮助，让他们尽量少走一些弯路。

《Scratch底层架构源码分析》从Scratch底层源码讲起，首先对源码进行结构和流程上的梳理，然后深入每个模块，详细地讲解核心概念，并对其实现原理做深入分析，读者只要具备前端开发的相关知识就可以很轻松地理解和掌握本书内容。本书具有以下三大特色：

《Scratch底层架构源码分析》内容涵盖Scratch技术生态中的核心技术点，如Scratch代码块、Scratch虚拟机、Scratch渲染引擎、Scratch存储模块和Scratch用户界面等。各章内容简单介绍如下：

第1章对Scratch进行概述，并简要介绍项目中用到的两个重要工具Webpack和NPM。

第2章详细介绍积木块Scratch-blocks，并对其源码进行详细分析。

第3章主要介绍虚拟机Scratch-vm的相关技术。

第4章深入剖析渲染引擎Scratch-render。

第5章详细介绍Scratch的存储技术Scratch-storage。

第6章详细介绍Scratch的图形化界面Scratch-gui。

第7章主要介绍Scratch生态中一些非核心但非常重要的技术，包括绘图编辑器Scratch- paint、音频引擎Scratch-audio及解析验证工具Scratch-parser。

《Scratch底层架构源码分析》涉及的Scratch源码下载地址如下：

限于作者水平，加之写作时间有限，书中可能存在一些疏漏和不当之处，敬请各位读者指正。读者阅读本书时若有疑问，可以通过以下方式反馈。

E-mail：hzbook2017@163.com

《Scratch底层架构源码分析》从谷歌Blockly技术开始讲起，逐步深入到Scratch的技术生态，对Scratch中的核心技术做了深入分析和源码讲解。通过阅读本书，读者不但可以系统地学习Scratch中的核心技术模块，而且还能深入理解Scratch底层代码的实现和结构设计，为二次开发打下基础。

《Scratch底层架构源码分析》共7章，涵盖的主要内容有Blockly简介、Scratch-blocks源码分析、Scratch-vm源码分析、Scratch-render源码分析、Scratch-storage源码分析、Scratch-gui源码分析，以及Scratch-paint、Scratch-audio和Scratch-parser的简单介绍。

《Scratch底层架构源码分析》适合想了解Scratch语言底层技术架构的开发人员和技术爱好者，尤其是需要做Scratch二次开发的程序员阅读。另外，本书还适合作为相关教学人员和研究人员的参考资料。

孟灿 毕业于北京师范大学，获工学硕士学位。对图形图像处理与模式识别有广泛研究。曾经就职于国内外一线互联网公司，有多年的互联网行业开发和管理经验，工作内容涉及算法、前端和后端等技术领域。2019年入职核桃编程教育公司，从事Scratch少儿编程教学研究和二次开发。

这是一本诚意之作，是国内较早系统地介绍Scratch底层源码的图书，融入了作者对Scratch 3.0及其生态技术相关源码的深刻理解。推荐各位少儿编程行业的从业者和爱好者阅读本书，相信你们能够从书中学到Scratch二次开发的相关知识，并能够搭建自己的少儿编程平台。

——上海交通大学副教授 孟帅

本书凝聚了孟灿多年从事一线编程工作的感悟以及他对Scratch编程语言的深刻理解，是他总结的一本经验之作。本书也许无法成为你做Scratch开发的“*钥匙”，但可以作为你在Scratch开发道路上不可或缺的“重要把手”。

——北京师范大学副教授 尹乾

作为一名教育工作者，我见证了*近几年Scratch少儿编程在国内的迅速发展。随着竞争的加剧，越来越多的少儿编程教育机构想要开发具有自己特色的Scratch平台，这就需要开发人员对Scratch语言的底层架构有一定的了解。本书的出版非常及时，可以帮助开发人员理解Scratch的底层架构原理，从而更加高效地完成开发工作。

——北京邮电大学教授 林齐宁

Scratch堪称编程入门的*语言。本书从底层源码剖析的独特角度出发，完整地阐释了Scratch可视化图形编程工具的核心代码架构，是可视化图形编程领域极为难得且极具价值的一本佳作，为更多希望深入掌握Scratch开发和教学的人员指明了一条“知其然更知其所以然”的学习路径。

——毛豆课堂创始人/CEO 李明

在当前少儿编程火热的市场背景下，大批教育工作者不断涌现，自建的Scratch平台层出不穷。我所出版的Scratch书籍落脚在使用上，适合教学和学习Scratch编程，而本书的主旨是深入探寻Scratch底层的代码逻辑，非常适合每一位想开发自己的Scratch编程平台的技术人员和爱好者阅读。

——畅销书《轻松玩转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.2 Scratch-paint使用方法 277

7.2 Scratch-audio：音频引擎 279

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

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

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

7.4 小结 284

内容丰富：围绕核心模块，全面、系统、深入地介绍Scratch技术生态的相关知识。

重点突出：围绕代码块、虚拟机、渲染和存储等核心技术，多角度展开讲解。

深入浅出：以简单易懂的语言讲解深层次的架构知识，降低学习难度。

实用性强：针对Scratch开发过程中的常见疑点和难点进行系统性讲解。