自定义块:样式指南

您所在的位置:网站首页 blocky是什么意思 自定义块:样式指南

自定义块:样式指南

2024-05-21 01:58| 来源: 网络整理| 查看: 265

# 自定义块:样式指南

多年来,Blockly 和 Blockly Games 团队已经吸取了许多教训,这些教训适用于开发新积木的人。以下是我们犯过的错误或其他人常见的错误的集合。

这些是我们使用 Blockly 的视觉样式学到的一般课程,可能并不适用于所有用例或设计。存在其他解决方案。这也不是用户可能遇到的问题以及如何避免它们的详尽列表。每种情况都有点不同,并且各有其取舍。

# 1.条件与循环

对于新用户而言,最困难的障碍是条件和循环。 许多基于块的环境将这两个块都归为相同的“控件”类别,并且两个块具有相同的形状和颜色。 当新用户混淆这两个功能块时,这通常会导致挫败感。 Blockly 建议将条件和循环移动到单独的“逻辑”和“循环”分类中,每种分类使用不同的颜色。 这清楚地表明,尽管它们具有相似的形状,但它们是行为不同的独特想法。

建议:将条件和循环分开。

# 2.基于 1 的列表

新手程序员在首次遇到从零开始的列表时会做出不良反应。 结果是: Blockly 通过遵循 Lua 和 Lambda Moo 的方式基于 1 创建列表和字符串索引。

为了更高级地使用 Blockly,支持从零开始的列表,以使过渡到文本更加容易。对于年轻或更多的新手受众,仍建议使用基于 1 的索引。

建议:1 是第一个数字。

# 3.用户输入

有三种从用户那里获取参数的方法。下拉菜单是限制性最强的,适合简单的教程和练习。输入字段可提供更大的自由度,并且适合进行更多的创造性活动。值块输入(通常带有影子块)提供了计算值(例如随机生成器)的机会,而不仅仅是静态值。

建议:选择一种适合您的用户的输入方法。

# 4.实时块图像

块的文档应包括它所引用的块的图像。 截屏很容易。 但是,如果有 50 张这样的图像,并且将应用程序翻译成 50 种语言,则需要维护 2500 张静态图像。 之后配色方案如发生变化,则需要更新 2500 张图像。

为了摆脱维护噩梦,Blockly Games 将所有屏幕截图替换为以只读模式运行的 Blockly 实例。结果看起来与图片相同,但是可以保证是最新的。只读模式使国际化成为可能。

建议:如果您支持多种语言,请使用只读模式。

# 5.你的另一个左

来自美国儿童的反馈(尽管有趣的是,其他国家的反馈却未显示)表明,左右之间普遍存在混乱。这可以通过添加箭头来解决。如果方向是相对的(例如,相对于化身),则箭头的样式很重要。当化身朝向相反方向时,→ 直箭头或 ↱ 转向箭头会造成混淆。最有用的是 ⟳ 圆形箭头,即使旋转角度小于箭头指示的情况也是如此。

建议:尽可能用 Unicode 图标补充文本。

# 6.高级块

即使可能降低执行性能或灵活性,也应尽可能采用更高级别的方法。考虑以下 Apps 脚本表达式:

SpreadsheetApp.getActiveSheet().getDataRange().getValues()

在保留所有潜在功能的 1 比 1 映射下,将使用四个块构建上述表达式。 但是 Blockly 的目标是更高的层次,它将提供一个封装整个表达式的块。 目标是针对 95% 的情况进行优化,即使这会使其余 5% 的难度增加。 Blockly 并不是要替代基于文本的语言,而是要帮助用户克服最初的学习过程,以便他们可以使用基于文本的语言。

建议:不要盲目地将整个API转换为块。

# 7.可选的返回值

基于文本的编程中的许多函数执行一个动作,然后返回一个值。此返回值可以使用也可以不使用。一个例子是堆栈的 pop() 功能。可能会调用 Pop 来获取和删除最后一个元素,或者可能会调用 Pop 来删除最后一个元素而忽略返回值。

var last = stack.pop(); // Get and remove last element. stack.pop(); // Just remove last element.

基于块的语言通常不擅长忽略返回值。值块必须插入接受该值的东西。有几种策略可以解决这个问题。

a)绕开问题。大多数基于块的语言都设计了避免这种情况的语言。例如,Scratch 没有任何具有副作用和返回值的块。

b)提供两个块。如果工具箱中的空间不是问题,则一种简单的解决方案是为每种类型的块提供两个,一个带返回值,一个不带返回值。不利的一面是,这可能导致包含许多几乎相同的模块的混乱的工具箱。

c)变异一个块。使用下拉菜单,复选框或其他控件,允许用户选择是否有返回值。块然后根据其选项更改形状。在 Blockly 的列表访问块中可以看到一个示例。

d)吃掉值。App Inventor 的第一个版本创建了一个特殊的管道块,可以使用任何连接的值。用户不理解该概念,因此 App Inventor 的第二个版本删除了管道块,而是建议用户简单地将值分配给一次性变量。

建议:每种策略各有利弊,请选择适合您的用户的策略。

# 8.生长块

某些块可能需要可变数量的输入。比如一个加法运算块,它对任意一组数字求和,或者一个 if/elseif/else 运算块与任意一组 elseif 子句,或者一个列表构造函数,具有任意数量的初始化元素。有几种策略,每种策略都有其优点和缺点。

a) 最简单的方法是使用户用较小的块组成块。示例是通过嵌套两个两位数加法块来添加三个数字。另一个示例是仅提供 if/else 块,并使用户嵌套它们以创建 elseif 条件。

这种方法的优点是其最初的简便性(对于用户和开发人员而言)。缺点是,在有大量嵌套的情况下,代码变得非常笨拙,并且用户难以阅读和维护。

b) 一种替代方法是动态扩展该块,以便最后始终有一个空闲输入。同样,如果末尾有两个空闲输入,则该块会删除最后一个输入。这是 App Inventor 的第一个版本使用的方法。

由于一些原因,App Inventor 的用户不喜欢自动增长的块。首先,总是有空闲的输入,程序永远不会“完成”。其次,在堆栈中间插入一个元素令人沮丧,因为这涉及到断开编辑下面的所有元素并重新连接它们。也就是说,如果顺序不重要,并且用户能接受程序上的孔洞,那么这是一个非常方便的选择。

c) 为了解决孔洞的问题,一些开发人员将可以手动添加或删除的 +/- 按钮添加到输入块中。打开 Roberta 使用两个这样的按钮从底部添加或删除输入。其他开发人员在每行添加两个按钮,以便可以容纳从堆栈中间插入和删除操作。其他人在每行添加两个向上/向下按钮,以便可以适应堆栈的重新排序。

此策略的选择范围很广,从每个块仅两个按钮到每行四个按钮。一方面存在用户无法执行所需动作的危险,另一方面,界面上充满了按钮,看起来像是进取号星舰的舰桥。

d) 最灵活的方法是在块中添加变形器气泡。这被表示为一个单个按钮,用于打开该块的配置对话框。元素可以随意添加,删除或重新排列。

这种方法的缺点是对于新手来说,它的变形不直观。引入变形器需要某种形式的指导。针对小孩子的基于块的应用程序不应使用变形器。尽管了解到了它们,但它们对于高级用户而言是无价的。

建议:每种策略各有利弊,请选择适合您的用户的策略。

# 9.干净的代码生成

高阶 Blockly 用户应该能够查看生成的代码(JavaScript,Python,PHP,Lua,Dart等),并立即识别他们编写的程序。这意味着需要付出额外的努力来保持该机器生成的代码可读。多余的括号,数字变量,压缩的空格和冗长的代码模板都阻碍了生成优雅代码的方式。生成的代码应包含注释,并应符合 Google的风格指南 (opens new window)。

建议:为您生成的代码感到自豪。向用户展示它们。

# 10.语言依赖性

对干净代码的渴望的副作用是,Blockly 的行为很大程度上取决于交叉编译语言的行为方式。最常见的输出语言是 JavaScript,但是如果将 Blockly 交叉编译为另一种语言,则不应进行不合理的尝试来保留两种语言之间的确切行为。例如,在 JavaScript 中,空字符串为 false,而在 Lua 中为 true。为 Blockly 的代码定义单一的行为模式以执行,无论目标语言是什么,都将导致看起来像是从 GWT 编译器出来的难以维护的代码。

建议:块不是语言,请允许现有的语言影响行为。

在 Github 上编辑此页 (opens new window) 上次更新: 1/28/2023, 6:10:19 AM

← 块范式 操作符优先级 →



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3