我最近启动了一个新的业余爱好网站：http://jsstyle.github.com/。此页面用途简单：在填写完与 JS 相关的问卷后，用户会获得一个小型的指纹，代表他们的答案（有点类似于极客代码）。生成的徽章可以用于电子邮件签名或用来给朋友们留下深刻印象。该网站的第二个用途是：测量和收集选定的答案，以便进行一些简洁的比较和使用统计。

本文解释了在开发 JS 风格徽章过程中使用的一些设计决策和实现技巧。

页面导航

我的目标是设计一个不重新加载的网站，同时将必要的 JS 代码量保持在绝对最低限度。幸运的是，使用纯 HTML+CSS 可以实现这种效果。我们自然地使用了语义化的 HTML5，并为页面提供了一个带有本地锚链接的合适的<nav> 部分。

...
...
...

然后，一行简短的 CSS 代码（使用关键的:target伪类) 即可发挥作用。

section[id]:not(:target) { display: none; }

瞧！——我们拥有了一个具有完整浏览器历史记录支持的跨页面导航功能。

问题及其答案

所有问题及其潜在答案都定义在一个单独的文件中，def.js。这使得问卷的维护变得轻而易举。
需要为问题（这些问题需要是不可变的且唯一的）和答案（在一个问题中是不可变的且唯一的）分配一些 ID。这些 ID 用于

• 保证生成数据中固定的问题顺序（即使问题的视觉顺序发生变化）
• 保证选择的答案，即使其文本或顺序发生变化
• 在生成的图像/ASCII 中表示颜色和/或字符

例如，“分号”问题具有“;”的 ID——这使其成为结果指纹中的第五个问题（ID 按字典顺序排序）。其答案“有时”具有“=”的 ID，用于在 ASCII 签名中使用。此答案是第三个（按 ID 排序），对应于答案调色板中的蓝色（用于<canvas>图像）。

结果：ASCII 和 <canvas>

问卷完成后，我们需要生成结果徽章。实际上，需要生成三个不同的内容：图像版本、ASCII 版本和用作永久链接的 URL。

图像

这是最简单的任务：使用 HTML5 <canvas>，用合适的背景颜色填充它，在右下角渲染“JS”。（备注：官方的 JS 徽标不是用字体绘制的；它是一个纯粹的几何形状。我决定使用 Arial，因为它相对相似。）
各个答案由小的彩色方块表示。它们的顺序由问题 ID 的排序顺序给出；在图像中，排序顺序如下所示

0 2 5 9
1 4 8
3 7
6

等等。将答案索引转换为[x, y]坐标对是一个简单的数学练习。我们根据所选答案的排序顺序从固定调色板中选择正方形颜色。如果用户跳过了一个问题，我们将相应的正方形设置为透明。

ASCII

文本版本对应于图像版本，但使用答案 ID 来可视化输出，而不是彩色方块。整个签名呈现到<textarea>元素中；有一小段 JS 代码在单击该区域时“全选”。
我花了一些时间寻找<textarea>的最佳样式：使用合适的宽高比、美观的字体和合理的行高。对我来说，最佳解决方案是使用Droid Sans Mono字体，并使用CSS @font-face实现。

URL

我们希望生成的永久链接真正具有永久性：不受问题/答案文本或顺序的影响。为此，一个简单的算法对所选答案进行编码

1. 按 ID 对问题进行排序
2. 对于每个问题，获取用户的答案。如果未回答问题，则输出“ - ”
3. 如果已回答问题，则获取该答案的 ID 并获取其 Unicode 代码点
4. 答案使用 Unicode 范围 32..127 中的 ID。减去 32 并用零进行左填充，以生成“00”到“99”的值
5. 连接这些值和/或连字符（对于空问题）

生成的“哈希”不需要进行 URL 编码，因为它仅由数字组成。

分享是一种关爱

我决定包含指向三个流行的分享服务的链接。它们都公开了分享 API，但并非所有服务都希望您通过 JavaScript 调用来构建其分享 UI。让我们来看看

• Google Plus按钮最简单：在包含JS API 文件后，只需调用gapi.plusone.render函数即可。有两个小问题
  1. 确保在页面中附加按钮的容器时，将其渲染到其中。
  2. 生成的按钮很难完美对齐；需要一些!importantCSS 调整。
• Twitter不希望您动态构建内容。需要创建一个超链接，使用data-*属性填充它，并将Twitter JS API附加到页面中。
• 最后，LinkedIn分享按钮非常特殊：加载其分享 API后，需要创建一个类型为IN/Share的<script>节点，使用合适的属性丰富它，将其附加到页面中并调用IN.parse()。

结论

编写这个小程序让我感到很有趣；到目前为止，用户已经生成了超过 1400 个签名。随着这个数字的不断增长，在使用统计数据中出现了越来越多的有趣的 JS 使用模式。如果您还没有这样做，请立即生成您自己的 JS 风格徽章！