Scratch 项目简介

preper

# 什么是 Scratch

Scratch是美国麻省理工学院的“终身幼儿园团队”开发的一款图形化编程工具，通过点击并拖拽的方式就能完成编程，可以帮助儿童或成人初学者更好地学习编程的基础概念。 2007年，Scratch1.0公开发布，随后在2012年又推出了Scratch2.0，而Scratch3.0则是2019年的1月正式推出的。 Scratch 3.0 采用了HTML5和JavaScript技术来编写，支持所有的现代浏览器和WebGL。

# Scratch “家族”

Scratch在github上有一系列的开源项目，其官方的开发者账号为LLK (opens new window)。 点开这个账号的主页可以发现，相关的仓库一共有55个。 虽然其中的多数或者已经不再维护，或者已经是稳定版不需要频繁更新，但依然有很多的仓库依然很活跃。 下面就来介绍一下，在当前2021年，仍然活跃的Scratch相关的仓库。

# Scratch 核心库

  • scratch-gui (opens new window) 用于创建和运行 Scratch 3.0 项目的图形用户界面，是一个基于 react + redux 的 web 项目。 将这个仓库 clone 并运行之后，就能得到一个运行于本地的 scratch 网页。 目前市面上大多数应用 scratch 开发图形化编程的项目，都是基于此项目进行换皮、定制化二次开发而来。 也可以推断出，哪怕是相关的 app，scratch 也都是运行于 webview 环境的。 这种二次开发，虽然一些定制化功能也需要阅读并修改一些依赖库的源码，但大部分的功夫还是只需要花在这个项目上就足够了。
  • scratch-blocks (opens new window) 用于构建创意计算接口的库，核心库之一，scratch 积木块的源码都在这里。 不仅仅实现了块的样式、拖拽、拼接、创建、删除，还会在以上各个阶段抛出自定义事件，同步给其他库。 由于复用了 google blockly (opens new window) 的源码，所以代码看起来和现在的 js 包有一定区别。
  • scratch-render (opens new window) 用于 Scratch 3.0 的基于 WebGL 的呈现引擎，核心库之一，实现 scratch 编辑器中舞台的绘制，控制各种抽象对象绘制在舞台上的移动、旋转等。
  • scratch-vm (opens new window) 用于表示，运行和维护 Scratch 3.0 程序状态的虚拟机，核心库之一，可以称之为核心中的核心。 内部会将 scratch-blocks 里的积木块和对应的抽象事件进行绑定，同时会接收其发送来的积木块的创建、拼接等事件的广播，在内部拼装出虚拟块对象。 触发积木块的运行条件时会在内部执行对应的抽象事件，调用对应的 scratch-render 提供的绘制 api 来修改舞台上抽象角色的信息。
  • scratch-paint (opens new window) Scratch 3.0 的绘画编辑器，与 scratch 的运行机制关系并不大。 它的功能很强大，需要在 web 端实现画板功能的话可以学习一下这个仓库的源码。
  • scratch-storage (opens new window) 加载和存储 Scratch 3.0 的项目和资产文件，核心库之一。 实际加载和存储 .sb3 文件的方法都被封装在了 scratch-vm 中，这个仓库更多的是承载了存储资源文件（图片、音频等）的任务。

# 其他库

当然，未列出的仓库也并不一定是被弃用（就好比scratchx，今年的更新居然是弃用声明。。挺讽刺的），也可能是作为一个稳定的版本，不需要增加功能也暂时没有发现 bug 而已。

# 来自 2022 的结语

去年挖了个大坑，今年来看，应该是填不上了，所以文章的标题也改为了简介。 我从 Scratch 这个项目中学到了很多，和它相关的这个需求，应该也是我从业以来最难的工作。 做完了这个项目不久，我也接连的迎来了人生中的多个转折点，心态也发生了很大的变化，当然，已经和 Scratch 无关了。 网上关于 Scratch 的介绍很少，能搜到的我几乎都看了一遍，但作用有限，所以这也成了我第一个硬着头皮读源码的开源项目。 感觉 scratch-vm 的源码现在拿过来我还是知道哪块是干什么的。 希望后续还能有大块的时间阅读源码，下一个先从 webpack 开始吧。

什么是 Scratch
Scratch “家族”
Scratch 核心库
其他库
来自 2022 的结语