javascript - JavaScript 函数图

Question

哪些工具可用于在类似于 UML 序列图的东西中清楚地传达 JavaScript 变量范围和闭包等概念？例如，如何编写如下代码：（臭名昭著的循环问题）

var arr = [];
for(var i=0; i<10; i++) {
    arr.push(function() { alert(i); });
}
for(var j=arr.length;j--;) {
    arr[j]();
}

...在类似于此的图表中清楚地解释：

一个空白的 UML 序列图

score 7 · Accepted Answer

该代码是一个任意示例。该代码与该问题无关，仅演示了通常可以从描述中受益的误导性代码。

您不能在 UML 中描述闭包和范围。根本不支持它，反正在序列图中也不支持。JavaScript 中的闭包有点像在 Java 或 C# 中定义一个类，你不要把它放在你的 UML 中。嗯，我不能很好地解释这个..

作为一个 JavaScript 程序员，闭包是你必须理解的东西。

您的 UML 应该关注的是实体及其交互。不是一些语言“怪癖”（如果你愿意的话）喜欢闭包的需要。

我完全赞成描述误导性代码，但 UML 图不适合它。把它放在源代码的注释中。如果有人想知道这个函数是如何工作的，他会查看源代码。如果他不想知道，就不要打扰他。

score 7 · Accepted Answer

我喜欢 Dmitry Soshnikov 在JavaScript 中使用的图表。解释执行上下文和作用域链的核心。在评论中，他说他们是在 Visio 中完成的（并不是说工具在这里很重要，而是结构帮助理解的概念）。

我可以看到如何使用相似的图表来演示示例代码中创建的每个函数如何最终访问i同一范围内的变量，以及在代码的固定版本中，每个函数将如何在头部携带另一个项目它的作用域链，其中一个变量保存i包含作用域关闭时的当前值。

score 3 · Accepted Answer

我知道这已经回答了，但这里有一个很好的例子，它使用对象图来解释 JavaScript 中的函数、闭包和对象

图表是用文本文件（点符号）构建的，然后使用 GraphViz 自动生成

作者 Tim Caswell 在他的 GitHub 帐户中包含了指向源文件的链接

score 0 · Accepted Answer

有这个商业产品：

它生成流程图（我见过）和 UML 活动图（我没有 - 我只使用过更旧的版本）。

score 0 · Accepted Answer

JavaScript 闭包是匿名对象。在序列图中表示它们很棘手，但我相信可以这样完成：

JavaScript 闭包 UML

在这种情况下，主作用域会在循环中创建闭包，然后再调用它们。闭包是匿名的，属于通用类“闭包”。

在其他情况下，可以创建、命名、传递给另一个对象，然后从该对象调用闭包：

在此处输入图像描述

5 回答 5