Diagramas para las funciones de JavaScript

Question

¿Qué herramientas se pueden utilizar para transmitir conceptos como el alcance y cierre de variables de JavaScript claramente en algo similar a los diagramas de secuencia UML? Por ejemplo, ¿cómo puede código como el siguiente: (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](); 
} 

... se explicará claramente en un diagrama similar a ésta:

Answer 1

el código es un arbitraria ejemplo. El código no tiene nada que ver con la pregunta, simplemente demuestra un código a menudo engañoso que podría beneficiarse de su descripción.

No se puede describir el cierre y el alcance en UML. Simplemente no hay soporte para eso, de todos modos no en diagramas de secuencia. Los cierres en JavaScript son un poco como definir una clase en Java o C#, no lo pones en tu UML. Hmm, no puedo explicar esto muy bien ...

Cierres es algo que tienes que entender intrínsecamente como un programador de JavaScript.

En qué debe enfocarse su UML son las entidades y su interacción. No es un lenguaje 'peculiar' (si se quiere) como la necesidad de cierres.

Estoy a favor de describir el código engañoso, pero un diagrama UML no es el lugar adecuado. Ponlo en los comentarios en el código fuente. Si alguien quiere saber cómo funciona esta función, mirará el código fuente. Si él no quiere saber, no lo molestes con eso.

Answer 2

Hay un producto comercial:

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

Genera diagramas de flujo (que he visto) y diagramas de actividad UML (que no he - Sólo he utilizado una versión mucho más) .

Answer 3

Me gustan los diagramas de Dmitry Soshnikov utilizados en JavaScript. The Core para explicar el contexto de ejecución y las cadenas de alcance. En los comentarios, dice que se hicieron en Visio (no es que la herramienta sea lo importante aquí, sino los conceptos que las estructuras ayudan a transmitir).

puedo ver cómo diagramas similar podría ser usado para demostrar cómo cada función creada en el código de ejemplo, termina por acceder a una variable i en el mismo ámbito, y cómo en una versión fija del código, cada función se lleva alrededor otro elemento a la cabeza de su cadena de alcance, con una variable que mantiene el valor actual de i en el momento en que se cerró el alcance que lo contiene.

Answer 4

Los cierres de JavaScript son anonymous objects. Representarlos en los diagramas de secuencia es complicado, pero creo que se puede hacer así:

En este caso, el principal ámbito de aplicación crea el cierre en un bucle y luego recurre a ellos. El cierre es anónimo y pertenece a la clase general 'Cierre'.

En otros casos, el cierre podría ser creado, nombrado, pasa a otro objeto y luego se invoca de ese objeto:

Answer 5

Sé que esto ya está contestada, pero aquí es un buen ejemplo de el uso de diagramas de objetos para explicar las funciones, los cierres, los objetos en JavaScript

https://howtonode.org/object-graphs

Los gráficos se construyen con archivos de texto (en notación de puntos) y luego son generados automáticamente usando Gra phViz

El autor, Tim Caswell, ha incluido enlaces a los archivos de origen en su cuenta de GitHub