构建说明
Blocks 块
积木块是构建网页应用的基本单元,按照功能可以分为:
- 构建界面外观的块:HTML 和 Style。
- 实现界面交互的块:DOM。
- 功能或工具的封装:Widgets、Network、Utils,以及插件。
- JavaScript语法实现:Logic、Loops、Math、Text、List,以及 Variables 和 Functions。
以 Hello, World! 程序为例,首先通过 HTML 和 Style 构建界面,然后利用 DOM 实现按钮点击后的交互,交互过程用到了JavaScript的文本块。对于更复杂的应用,需要更多语法块实现逻辑,或使用功能封装的预置控件或工具。这些块将在对应章节中详细说明。
规则
网页应用一般由三种不同类型的标记(语言)构成,分别是:表示界面元素的HTML(超文本标记语言)、修饰界面外观的CSS(层叠样式表),以及实现应用逻辑的JavaScript脚本。
HTML 分类中的块以及某些功能封装的界面控件块会生成HTML标记。Style 分类中的块生成CSS,并应用于所连接的 HTML 块。其余的块将生成JavaScript,用于操作界面元素、响应事件、调用接口,或实现功能逻辑。
块的连接规则:
- HTML 块只能与 HTML 块上/下或在C型槽内部(包含)连接,并连接到根容器下。
- Style 块只能与 Sytle 块串联,并连接到要修饰的 HTML 块的样式槽。
- 生成JavaScript语句的块统称代码块,连续的代码块称为代码段。
- 初始化块 initialize 包含初始化代码段,可独立存在,并在程序启动时自动运行。
- 事件块作为事件代码的起点,连接事件处理代码块,可作为独立的代码段存在,并在事件触发时自动运行。
- Function(函数/方法)是JavaScript语法定义的独立代码段。
- 所有代码块都应该连接到以上三类代码段中,不可单独存在。