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

Question

Какие инструменты можно использовать для представления таких понятий, как область видимости переменных JavaScript и замыкания, в чем-то похожем на диаграммы последовательности UML?Например, как можно написать код, подобный следующему: ( проблема «Общеизвестная петля» )

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

... можно четко объяснить на диаграмме, аналогичной этой:

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

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

https://howtonode.org/object-graphs

Графики построены с текстомфайлы (в нотации DOT) и затем автоматически генерируются с использованием GraphViz

Автор, Тим Касвелл, включил ссылки на исходные файлы в свою учетную запись GitHub

Answer 4

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

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

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

Answer 5

Это коммерческий продукт:

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

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