2011-06-02 46 views
6

Những công cụ nào có thể được sử dụng để truyền tải các khái niệm như phạm vi và đóng biến của JavaScript rõ ràng trong một cái gì đó tương tự như sơ đồ trình tự UML? Ví dụ, làm thế nào có thể mã hóa như sau: (the Infamous Loop Problem)Sơ đồ cho các chức năng JavaScript

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

... được giải thích rõ ràng trong một sơ đồ tương tự với trang này:

A blank UML sequence diagram

+5

Đó là mã không làm những gì bạn nghĩ rằng nó. Mỗi cảnh báo sẽ cảnh báo giá trị cuối cùng của 'i'. Đó là vấn đề chức năng cổ điển trong vòng lặp. –

+0

Ví dụ của bạn sẽ cảnh báo '10' trên mỗi lần lặp lại. Xem http://stackoverflow.com/questions/5555464/javascript-closure-of-loop – lawnsea

+3

@lawnsea @Matt Ball - Tôi đã sử dụng nó vì lý do chính xác đó; bởi vì đó là ví dụ cổ điển. –

Trả lời

6

Mã này là một tùy ý thí dụ. Mã không liên quan gì đến câu hỏi, chỉ đơn thuần là chứng tỏ mã gây hiểu nhầm thường có thể được lợi từ việc mô tả.

Bạn không thể mô tả bao đóng và phạm vi trong UML. Chỉ đơn giản là không có hỗ trợ cho nó, không phải trong sơ đồ trình tự anyway. Các đóng trong JavaScript giống như việc định nghĩa một lớp trong Java hoặc C#, bạn không đặt nó trong UML của mình. Rất tiếc, tôi không thể giải thích rõ điều này ..

Đóng cửa là thứ bạn phải hiểu vốn như một lập trình viên JavaScript.

Điều UML của bạn nên tập trung vào là các thực thể và tương tác của chúng. Không phải một số ngôn ngữ 'quirk' (nếu bạn sẽ) như sự cần thiết phải đóng cửa.

Tôi là tất cả để mô tả mã gây hiểu lầm, nhưng biểu đồ UML không phải là nơi dành cho nó. Đặt nó trong các ý kiến ​​trong mã nguồn. Nếu ai đó muốn biết chức năng này hoạt động như thế nào, anh ta sẽ xem mã nguồn. Nếu anh ta không muốn biết, đừng làm phiền anh ta với nó.

+1

Đặc biệt vì câu hỏi yêu cầu "giải thích rõ ràng" đây là câu trả lời đúng. Bạn không thể. Mở rộng các sơ đồ UML của bạn với ký pháp không phải UML tùy chỉnh mà bạn có thể trình bày chúng. Nhưng không phải như thế. – Kissaki

+0

+1 - "Không" là một câu trả lời công bằng ... nhưng có suy nghĩ nào về việc truyền đạt sự tương tác của các thực thể đó không? Ngay cả ở định dạng không phải UML? –

+0

Sử dụng biểu đồ trình tự (UML)? Đó là cách bạn mô tả sự tương tác thực thể .. – Halcyon

0

Có sản phẩm thương mại này:

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

Nó tạo ra các biểu đồ dòng chảy (mà tôi đã nhìn thấy) và sơ đồ hoạt động UML (mà tôi đã không - Tôi đã chỉ được sử dụng một phiên bản cũ hơn) .

6

Tôi thích các biểu đồ Dmitry Soshnikov được sử dụng trong JavaScript. The Core để giải thích ngữ cảnh thực hiện và chuỗi phạm vi. Trong các bình luận, ông nói rằng họ đã làm trong Visio (không phải là công cụ là điều quan trọng ở đây, đó là khái niệm các cấu trúc giúp vượt qua).

Tôi có thể xem cách biểu đồ tương tự có thể được sử dụng để minh họa cách mọi hàm được tạo trong mã ví dụ của bạn kết thúc truy cập biến số i trong cùng phạm vi và cách trong phiên bản mã cố định một mục khác ở phần đầu của chuỗi phạm vi của nó, với một biến giữ giá trị hiện tại là i tại thời điểm phạm vi chứa đã bị đóng.

+0

Điều này có vẻ thú vị. Tôi đã hy vọng cho một cái gì đó nhiều hơn trình tự-y nhưng điều này có vẻ rất hứa hẹn. +1 –

0

Đóng JavaScript là anonymous objects. Đại diện cho họ trong sơ đồ trình tự là khó khăn nhưng tôi tin rằng nó có thể được thực hiện như thế này:

JavaScript Closure UML

Trong trường hợp này phạm vi chính tạo ra đóng cửa trong một vòng lặp và sau đó gọi cho họ. Việc đóng cửa là vô danh và là của lớp chung 'Đóng cửa'.

Trong trường hợp khác, việc đóng cửa có thể được tạo ra, được đặt tên, thông qua đối tượng khác và sau đó gọi từ đối tượng đó:

enter image description here

+0

Đóng cửa không cần phải ẩn danh. Bất kỳ hàm trả về hàm bên trong (hoặc đối tượng có tham chiếu đến hàm bên trong) sẽ tạo ra một đóng – Ryan

2

Tôi biết điều này đã được trả lời, nhưng đây là một ví dụ tốt về sử dụng biểu đồ đối tượng để giải thích chức năng, đóng cửa, các đối tượng trong JavaScript

https://howtonode.org/object-graphs

Các đồ thị được xây dựng với các tập tin văn bản (trong ký hiệu DOT) và sau đó được tự động tạo ra sử dụng Gra phViz

Tác giả, Tim Caswell, đã bao gồm các liên kết đến các file nguồn vào tài khoản của mình GitHub

enter image description here

Các vấn đề liên quan