一、UI与代码文件对应关系
- toolbox里面包含flyout_base, flyout_base包含workspace。
- flyout_base有两个实现：flyout_horizontal(横排列)，flyout_vertical(竖排列)
- worksapce是积木块的容器，ui实现有workspace_svg
- 积木块实现是block.js，ui现实有block_svg，block_svg又现实了两种排列：block_render_svg_horizontal(横排列)和block_render_svg_vertical(竖排列) 二、DOM树结构
每个积木块代码实例是Block，都有svg（dom节点）、xml描述，功能块Xml.js提供相应的转换。每个block的dom节点在class='blocklyBlockCanvas'上，class='blocklyBlockCanvas'上层是class='blocklyWorkspace'，对应是WorkspaceSvg代码实例，Scratch-Blocks的整一个dom入口是class=‘injectionDiv’，简化结构如下：
class=‘injectionDiv’
｜—— class='blocklyToolboxDiv'
｜—— class='blocklySvg'
｜ ｜—— class='blocklyWorkspace'
｜ ｜—— class='blocklyBlockCanvas'
｜ ｜—— class='blocklyBubbleCanvas'
｜—— class='blocklyFlyout'
｜—— class='blocklyWorkspace'
｜—— class='blocklyBlockCanvas'
｜—— class='blocklyBubbleCanvas'
三、角色的相关实现类
每个角色对象就是RenderedTarget，对应文件就是rendered-target.js，内部成员Sprite实现了外观，声音，积木块等相关资源。
四、scratch工程的三大主要模块
scratch-blocks：积木块功能，通过Blockly二次开发
scratch-vm：业务逻辑模块，执行编程的命令
scratch-render：渲染层，舞台的控制都在这里
五、scratch-blocks修改
在scratch-gui中，参考blocks.js，是通过修改导出的scratchBlocks，从而修改scratch-blocks功能，所以我们可以用同样的方案去免编译修改scratch-blocks。
需要快速获取scratch-blocks的修改效果，直接浏览器打开scratch-blocks项目下的tests文件夹的html文件即可。
六、scratch-vm工程主要说明
七、scratch-render，舞台相关的实现
舞台渲染的主要逻辑代码都在RenderWebGL类上，每个角色关联的对象是Drawable，角色的外观关联的对象是Drawable的skin成员，继承Skin的有PenSkin（画笔对象）、SVGSkin（SVG图片）、BitmapSkin（png，jpg图片）。
