本书从谷歌Blockly技术开始讲起,逐步深入到Scratch技术生态,对Scratch中的核心技术进行了深入分析和源码讲解,让读者不但可以系统地学习Scratch中的核心概念,而且还能深入理解其代码实现,为二次开发打下基础。
本书共7章,对核心技术进行了精讲,并对相关技术进行了介绍。本书涵盖的内容有Blockly简介、Scratch-blocks源码分析、Scratch-vm源码分析、Scratch-render源码分析、Scratch-storage源码分析、Scratch-gui源码分析,以及Scratch-paint、Scratch-audio和Scratch-parser的简单介绍及其相互联系和连接。
本书涉及软件开发的底层内容,深入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-storage228
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 什么是React247
6.2.2 React关键技术248
6.2.3 什么是Redux249
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
金坷垃 (2021/6/13 17:23:00):这个东西太金坷垃了。