一个基于 JS 的可视化蓝图编程引擎，基于节点创建脚本

欢迎大家来到IT世界,在知识的湖畔探索吧!

《开源精选》是我们分享 Github 开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个蓝图可视化编程系统——codeck。

欢迎大家来到IT世界,在知识的湖畔探索吧!

codeck 是一款蓝图可视化编程系统，其理念是，在网页中使用基于节点的界面创建任何编程语言能够编程出的脚本。设计灵感来源于虚幻4引擎的蓝图可视化脚本。

使用场景

与一般的编程语言不同的是，codeck 的设计方向在于一些需要快速实现的地方，对于一些简单的编程场景，单独开一个项目的成本会相对较高。而基于网页的 codeck 则实现了随用随编程的理念，将快速验证的成本降低到一个很低的地步。

我们相信，编程需要的是逻辑能力而不是专业能力，很多人可能没有对某种语言的精通，但是几乎所有人都具备基本的逻辑能力，而这些逻辑能力才是编程的核心内容。

使用 codeck, 你甚至不需要了解其背后的细节。我们会将很多技术细节封装成一个单独的、语言无关节点，并通过一些 端点(pin) 将这些上下文暴露出来。通过连线(connection)将其串联。

基本概念

节点 Node

codeck 的编程基础是 节点(Node)，每个节点可以被分成输入和输出两部分。这两部分都是由 端点(pin) 组成的，同时 端点(pin) 根据行为可以被分为 执行端点(Exec Pin) 和 数据端点(Port Pin)

如上图所示是一个比较完整的节点构成。其中左边是输入右边是输出，圆形为数据端点用于连接数据，五边形为执行端点用于描述节点与节点之间的关系。一般标准执行节点是描述生成代码的先后顺序

以所示 Loop节点 为例，其生成代码格式应当如下：

[1] for (let [5] = 0; [5] < [3]; [5]++) { [4] } [2]

欢迎大家来到IT世界,在知识的湖畔探索吧!

其中中括号中的数字分别代表不同端点。可以很明显看到：

• 1,2,4 是执行端点，表示代码的占位
• 3,5 是数据端点，表示代码的变量

连线 Connection

连线是连接节点与节点之间的唯一方式，对于 执行端点(Exec Pin) 来说，连线就是执行语句的下一步，对于 数据端点(Port Pin) 来说，连线就是变量之间的引用。

连线有几条规则需要遵守:

• 只有不同节点可以连接：节点自身不能连接自身
• 只有相同类型的端点可以连接：执行端点对执行端点，数据端点对数据端点
• 只有不同方向的端点可以连接：连线走向永远是从一个节点的出口到一个节点的入口
• 统一端点的连线数量有约束：① 对于执行端点来说，永远最多只能有一条连线，即一对一 。 ② 对于数据端点来说，输入的连最多只能有一条连线，而输出连线可以有很多

变量 Variable

变量是用于存储中间数据的容器，变量可以分为GET节点和SET节点。

以上结构生成出的代码如下:

欢迎大家来到IT世界,在知识的湖畔探索吧!let test; test = "Hello World"; console.log(test);

-END-

开源协议：Apache2.0

开源地址：
https://github.com/moonrailgun/codeck