《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二次开发的程序员阅读。另外，本书还适合作为相关教学人员和研究人员的参考资料。

第1章 开始Scratch之旅
作为一种少儿编程语言，Scratch已经在全球150多个**和地区得到普及。随着使用人数的剧增，越来越多的技术开发人员投身到Scratch的研究中。本章将对Scratch进行总体的概述，并对项目中用到的两个重要工具进行大体介绍，以便为接下来的源码分析做好准备。
本章涉及的主要内容如下：
? Scratch概述，讲述Scratch的发展历史、项目生态及使用现状。
? Scratch源码分析的意义，介绍Scratch源码分析的动机及价值所在。
? Webpack简介，从宏观上讲解Webpack的作用及它的4个核心概念。
? NPM简介，从功能、组成及使用场景上对NPM进行概括介绍。
?注意：有关Webpack和NPM的内容，读者可以参考其他相关资料或书籍，本书不做详细讲解。
1.1 Scratch概述
Scratch是麻省理工学院媒体实验室终身幼儿园小组的一个开源项目，可以免费使用。通过Scratch，可以编写自己的交互式故事、游戏和动画，并与在线社区的其他人分享自己的创作。Scratch可以���助年轻人学会创造性的思考、有条理的推理及协作，这也是21世纪的基本生活技能。
1.1.1 Scratch发展历史
Scratch一共有三个大的版本，分别是Scratch 1.0、Scratch 2.0及目前*新的Scratch 3.0，每一个版本的发展都历经了几年的时间，其间都有多个小的版本迭代，如今的Scratch 3.0已是一个相对稳定的版本。
Scratch 1.0从2003年开始，一直延续到2007年1月才发布*终程序和Scratch网站，其中跨越了多个版本，从v0.1到2006年11月的教育测试版，包含多个不同的界面及不同块和功能的实验。
Scratch 2.0的开发是一个历时数年和历经多个阶段的过程，其中有v1.1、v1.2、v1.3及v1.4四个版本，直到2013年1月28日才发布公测版，并*终于2013年5月9日正式发布。Scratch 2.0的主要特点是重新设计了编辑器和网站，是**个同时包含在线编辑和离线编辑的版本。发布之后，Scratch 2.0仍旧不断地更新功能并对问题进行修复，直到Scratch 3.0正式发布。
Scratch 3.0是当前的主要版本，于2019年1月2日正式发布。它是用HTML和JavaScript编写的，对Scratch进行了重新设计和实现，以新的、现代的外观和设计为特点，并可以与许多移动设备兼容，不需要依赖Flash。
1.1.2 Scratch技术生态
Scratch现在已经发展成了一种生态，基于Scratch的项目在GitHub上已经非常多，以官方的为主，其中*核心的项目包括Scratch-gui、Scratch-blocks、Scratch-vm、Scratch-render及Scratch-storage，只要掌握了以上几个核心项目，Scratch生态的其他项目都很好理解，因此本书将分章对这些核心项目进行源码分析。
1.1.3 Scratch使用现状
少儿编程曾一度被誉为K12教育中的一个黄金赛道，市场和资本都对其有非常高的期待。在国外，少儿编程起步较早，现在已经发展得比较成熟。国内虽然起步稍晚，但也在迅猛发展。
Scratch作为一种可拖曳、图形化的少儿编程语言，在众多语言中脱颖而出成为佼佼者。它通过人性化的设计，将复杂的编程过程变得像搭积木一样简单，带领无数儿童敲开了编程的大门。现在它已被翻译为40多种语言。覆盖150多个**和地区。*近几年，国内涌现出了一批Scratch教育公司，它们纷纷推出了自己的教育产品。与此同时，基于Scratch的论坛、图书、会议及竞赛也在逐年增加。
1.1.4 Scratch源码分析的意义
2019年，随着Scratch 3.0正式发布，国内外对Scratch的研究热情**高涨，催生了很多互联网编程教育公司，它们在此开源项目的基础上进行了二次开发，推出了自己的少儿编程产品。笔者也有幸加入了这样一家公司。作为一名技术开发人员，在研究Scratch底层代码的过程中，笔者发现代码组织不规范，注释不充分，甚至找不到任何有价值的开发文档，理解起来非常吃力。
市面上有关Scratch的图书非常多，但都停留在语言介绍和使用层面上。到目前为止，还没有一本书是介绍Scratch底层技术的，并且网络上的分享资料也非常少且不系统。要想了解底层技术，只有看源码这一种方式，费时、费力且门槛高。这也是本书创作的*主要原因。
本书从源码入手，对Scratch生态中的一些核心项目进行了深入分析，以帮助技术开发人员从底层理解Scratch的原理，扫除认知上的障碍，提高开发效率，进而开发出更好的产品。
1.2 Webpack打包工具简介
Scratch生态的大部分项目都是基于Webpack打包的，熟悉Webpack对理解项目有很大的帮助。从本质上讲，Webpack是一个JavaScript应用程序的静态模块打包工具。其在处理应用程序时会递归地构建一个依赖关系图，其中包含应用程序所需的每个模块，然后将所有这些模块打包成一个或者多个捆。其可以打包的资源不仅是JavaScript文件，还可以是图片和样式。
1.2.1 Webpack的核心概念
Webpack具有非常强大的功能，但其核心概念只有以下4个，理解它们是掌握Webpack的基础。
? 入口：Webpack工作的起始点，可以配置一个或者多个入口。Webpack以入口为起始构建其内部依赖图，进入入口后，Webpack会找出其所有的直接依赖和间接依赖，*终输出到叫作“捆”的文件中。
? 出口：告诉Webpack在什么地方输出它创建的捆文件，以及如何对这些文件进行命名。
? 加载器：Webpack自身只能理解JavaScript，加载器的存在让Webpack能够处理那些非JavaScript文件。加载器可以将所有类型的文件转化为Webpack能处理的有效模块，这样就可以利用Webpack的打包能力对它们进行处理。
? 插件：加载器被用于转换某些类型的文件，而插件则用于执行范围更广的任务，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
1.3 NPM包管理工具简介
NPM是世界上*大的软件注册**，每周大概有30亿次的下载量，包含超过60万个包，来自全球各地的开源***都在使用NPM共享包，许多组织也用NPM来管理私有开发。在Scratch中，很多项目是通过NPM包的形式引用第三方包，同时将自身打成一个NPM包，以供其他项目使用。
1.3.1 NPM的组成
NPM由网站、注册**及命令行工具3个独立的部分组成，它们共同为我们提供了丰富的包管理功能。
? 网站：可以使用网站查找包、设置配置文件和管理NPM体验的其他方面。例如，可以设置组织来管理对公共包或私有包的访问。
? 注册**：是一个大型的公共数据库，存放JavaScript软件及相关的元信息。
? 命令行工具：命令行工具从终端运行，它是大多数程序开发人员与NPM打交道的方式。
1.3.2 NPM的使用场景
NPM是随同Node.js一起安装的包管理工具，能够解决Node.js代码部署上的很多问题，其*常见的使用场景有以下3种：
? 允许用户从NPM服务器下载第三方包到本地使用。例如，在Scratch-gui中用到了第三方库React。
? 允许用户从NPM服务器下载并安装第三方命令行程序到本地使用。例如，在Scratch-gui中用到了代码检测工具Eslint。
? 允许用户将自己编写的包或命令行程序上传到NPM服务器供其他项目使用。例如，Scratch-vm就被封装成了一个NPM包供Scratch-gui使用，同时Scratch-gui也被封装成了一个包供其他项目使用。
1.4 小 结
Scratch作为一种图形化、可拖曳的编程语言，已经在全球150多个**和地区得到普及，拥有40多种语言版本。在开始Scratch源码分析之前，本章从发展历史、项目生态、使用现状等多个角度对Scratch进行了概述，使读者对其有一个整体认识，同时也阐述了对其进行源码分析的意义。除此之外，对项目中用到的打包工具Webpack和包管理工具NPM也进行了简单的讲解。

第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