Диаграммы для функций JavaScript

Question

Какие инструменты могут использоваться для передачи понятий, таких как масштабирование и закрытие переменных JavaScript, что-то похожее на диаграммы последовательности UML? Например, как можно закодировать как следующее: (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](); 
} 

... быть четко объяснено в схеме, подобной этой:

Answer 1

Код произвольное пример. Код не имеет ничего общего с вопросом, просто демонстрирует часто вводящий в заблуждение код, который может быть полезен при описании.

Вы не можете описать закрытие и область видимости в UML. В этом нет никакой поддержки, а не в диаграммах последовательностей. Закрытие в JavaScript немного напоминает определение класса в Java или C#, вы не ставите его в свой UML. Хмм, я не могу это объяснить очень хорошо.

Закрытие - это то, что вы должны понимать по сути как программист JavaScript.

В чем ваш UML должен быть сосредоточен на объектах и ​​их взаимодействии. Не какой-то язык «quirk» (если хотите), как необходимость закрытия.

Я все для описания вводящего в заблуждение кода, но UML-диаграмма не для этого. Поместите его в комментарии в исходном коде. Если кто-то хочет знать, как работает эта функция, он посмотрит на исходный код. Если он не хочет знать, не беспокойте его.

Answer 2

Там в этот коммерческий продукт:

http://www.aivosto.com/visustin.html

Он генерирует блок-схемы (которые я видел) и диаграммы UML активности (которые я не - я только использовал гораздо более старую версию) ,

Answer 3

Мне нравятся диаграммы, которые Дмитрий Сошников использовал в JavaScript. The Core, чтобы объяснить контекст выполнения и сферы действия. В комментариях, он говорит, что они были сделаны в Visio (не то, что инструмент здесь важен, это концепции, с которыми помогают структуры).

Я вижу, как подобные диаграммы могут быть использованы для демонстрации того, как каждая функция, созданная в вашем примере кода, получает доступ к переменной i в той же области действия и как в фиксированной версии кода каждая функция будет переносить другой элемент в заголовке своей цепочки областей видимости, с переменной, удерживающей текущее значение i во время закрытия области содержимого.

Answer 4

Закрытие JavaScript anonymous objects. Представляя их в диаграммах последовательности сложно, но я считаю, что это можно сделать так:

В этом случае основная сфера создает замыкания в петлю, а затем вызывает их. Закрытие анонимно и относится к общему классу «Закрытие».

В других случаях замыкание может быть создано, по имени, передается на другой объект, а затем вызывается из этого объекта:

Answer 5

Я знаю, что это уже ответил, но вот хороший пример используя диаграммы объектов для объяснения функций, затворов, объекты в JavaScript

https://howtonode.org/object-graphs

графики построены с текстовыми файлами (в нотации xxx.xxx.xxx.xxx), а затем генерируется автоматически с помощью Гра phViz

Автор, Тим Caswell, включил ссылки на исходные файлы на его GitHub счет