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]();
}

...在类似于这个的图表中清楚地解释:

Answer 1

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

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

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

您的UML应该关注的是实体及其交互.不是某种语言'quirk'(如果你愿意的话)就像需要关闭一样.

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

Answer 2

我喜欢Dmitry Soshnikov在JavaScript中使用的图表.核心解释执行上下文和范围链.在评论中,他说他们是在Visio中完成的(并不是说工具在这里是重要的,它是结构有助于实现的概念).

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