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]();
}
... 次のような図で明確に説明してください。
JavaScriptで使用されているDmitrySoshnikovの図が好きです。実行コンテキストとスコープチェーンを説明するコア。コメントの中で、彼はそれらがVisioで行われたと述べています（ツールがここで重要なことではなく、構造が理解するのに役立つ概念です）。
iサンプルコードで作成されたすべての関数が同じスコープ内の変数にアクセスする方法と、コードの固定バージョンでは、各関数が先頭にある別のアイテムをどのように実行するかを示すために、同様の図をどのように使用できるかがわかります。スコープチェーンの、i含まれているスコープが閉じられたときの現在の値を保持する変数を使用します。
コードは任意の例です。コードは質問とは何の関係もありません。説明することで恩恵を受ける可能性のある誤解を招くコードをしばしば示しているだけです。
UML でクロージャとスコープを記述することはできません。とにかく、シーケンス図ではなく、それに対するサポートはありません。JavaScript でのクロージャは、Java や C# でクラスを定義するのと少し似ています。UML には入れません。うーん、これはうまく説明できません..
クロージャーは、JavaScript プログラマーとして本質的に理解しなければならないものです。
UML が注目すべきは、エンティティとその相互作用です。クロージャーの必要性など、一部の言語の「風変わりな」(場合によっては) ではありません。
誤解を招くようなコードを記述することには大賛成ですが、UML ダイアグラムはそのための場所ではありません。ソースコードのコメントに入れます。この関数がどのように機能するか知りたい人は、ソース コードを参照してください。彼が知りたくないのなら、気にしないでください。
これはすでに回答されていることは知っていますが、オブジェクト図を使用して JavaScript の関数、クロージャー、オブジェクトを説明する良い例を次に示します。
https://howtonode.org/object-graphs
グラフはテキスト ファイル (DOT 表記) で作成され、GraphViz を使用して自動生成されます。
著者の Tim Caswell は、彼の GitHub アカウントにソース ファイルへのリンクを含めました。
この商用製品があります：
http://www.aivosto.com/visustin.html
フローチャート（私が見たもの）とUMLアクティビティ図（私は見ていません-私はずっと古いバージョンしか使用していません）を生成します。
JavaScript クロージャは匿名オブジェクトです。それらをシーケンス図で表現するのは難しいですが、次のようにできると思います。
この場合、メイン スコープはループ内でクロージャを作成し、後でそれらを呼び出します。クロージャーは無名で、一般的なクラス「クロージャー」です。
他の場合では、クロージャーを作成して名前を付け、別のオブジェクトに渡し、そのオブジェクトから呼び出すことができます。
