Question

可以使用哪些工具在类似于UML序列图的内容中传达JavaScript变量作用域和闭包等概念？例如，如何编码如下：（the Infamous Loop Problem）

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

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

A blank UML sequence diagram

Answer 1

代码是一个任意的例子。代码与问题无关，只是演示了经常误导的代码，这些代码可以从被描述中受益。

您无法在UML中描述闭包和作用域。根本没有支持它，而不是顺序图。 JavaScript中的闭包有点像在Java或C＃中定义一个类，你不要把它放在你的UML中。嗯，我无法解释这个......

闭包是你必须作为JavaScript程序员固有地理解的东西。

您的UML应该关注的是实体及其交互。不是某种语言'怪癖'（如果你愿意的话）就像需要关闭一样。

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

Answer 2

我喜欢Dmitry Soshnikov在JavaScript. The Core中用来解释执行上下文和范围链的图表。在评论中，他说他们是在Visio中完成的（并不是说工具在这里是重要的，它是结构有助于实现的概念）。

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

Answer 3

我知道这已经得到了解答，但是这是一个使用对象图解释JavaScript中的函数，闭包，对象的好例子

图表是使用文本文件构建的（以DOT表示法），然后使用GraphViz自动生成

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

Answer 4

有这个商业产品：

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

Answer 5

JavaScript闭包是anonymous objects。在序列图中表示它们是棘手的，但我相信它可以这样做：

JavaScript Closure UML

在这种情况下，主范围在循环中创建闭包，然后调用它们。封闭是匿名的，属于普通类'闭包'。

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

enter image description here