問題描述

我的問題是我是否可以繪制任何圖表來可視化和 Electron/JavaScript 應用程序?

My question is if there are any kind of diagram I could draw in order to visualise and Electron / JavaScript application?

對于不同的 uml 圖，我需要替代方案，例如類圖或包圖，但由于 JS 是基于原型的，它不像 Java 或 C#，我不知道我能做什么.

I would need alternative for the different uml diagrams, like class or package diagram but since JS is prototype-based and it's not like Java or C# I don't know what I could do.

我唯一能做的就是一個序列圖，但我也應該(可能必須)做其他的圖.

The only one I might be able to make is a sequence diagram, but I should (probably must) make other diagrams as well.

推薦答案

首先，您根本沒有義務在 UML 圖中記錄所有內容.因為工作軟件比綜合文檔更重要.但是，UML 可以非常有用地突出您的軟件中一些不容易在代碼中找到的不那么瑣碎的方面.我的建議是關注這些方面.

First of all, you're not obliged to document everything in UML diagrams at all. Because working software is more important than comprehensive documentation. However, UML can be extremely useful to highlight some less trivial aspects of your software that can not be easily found in the code. And lmy advice would be to focus on these aspects.

現在，您應該在 UML 中做什么取決于您打算在模型中表示什么，以及您如何使用 js.

Now what you should do in UML all depends on what you intend to represent in your model, and how you're using js.

UML 區分 結構圖軟件的靜態視圖和 行為圖它的動態.

UML distinguishes structure diagrams to show the static view on your software and behavioural diagrams to show its dynamics.

這可能對你沒有吸引力，因為 JS 基于原型與 UML 相當靜態的基于類的視圖相反，它在類型邏輯方面提供了極大的靈活性.

This could be less attractive to you, since JS is prototype-based and offers a great flexibility regarding the typing logic in contrary to the rather static class based view of UML.

盡管如此，您仍然可以從類的概念中受益并使用 類圖為了顯示您的設計意圖(即您對對象分類的心理看法)或用于實例化對象的原型(尤其是如果您設計一些對象本質上充當原型，使它們事實上作為類的代表).當然，如果您的 JS 設計根本不是面向對象的，那么將您的程序映射到 OO 概念是沒有意義的(請參閱 這里).

Nevertheless, you could still benefit from the concept of classes and use class diagrams in order to show either your design intent (i.e. your mental view on the object categorisation) or the prototype used to instantiate objects (especially if you design some objects to act essentially as prototype, making them de facto as representatives for classes). Of course, if your JS design is not at all object oriented, it would make no sense to map your program to OO concepts (see here).

請注意，舊版對象圖可以對你來說更有意義，因為它可以解釋對象而不是類之間的關系(另請參閱此處)

Note that the legacy object diagram could make more sense for you, since it allows to explain the relations between objects rather than classes (see also here)

在這兩種情況下，您可能對使用依賴關系 有助于將靜態元素(即對象或類)鏈接到行為意圖.

In both cases, you may be especially interest in usage dependencies that help to link the static elements (i.e. objects or classes) to the behavioural intent.

最后包圖可以用來展示.js 文件及其依賴關系的大圖.它不是傳統 java 包的意義，但也可能有用.

Finally package diagrams could be used for example to show the big picture of your .js files and their dependencies. It's not in the sense of the traditional java packages, but could also be useful.

在這里，我會假裝所有這些圖表都對你有意義.

Here, I would pretend that all these diagrams could make sense for you.

我首先想到的是序列圖.因為它有助于可視化多個對象之間的預期交互，而這些僅通過瀏覽代碼很難找到.

The very first that comes to my mind is the sequence diagram. Because it helps to visualise expected interactions between several objects, and these are difficult to find out just by browsing through the code.

在某些情況下，狀態機圖可以幫助好.如果行為取決于某個狀態變量，或者如果您想顯示對象的完整生命周期，這將特別有意義.

In some cases, the state machine diagram could help as well. This makes particular sense if the behaviour depends on some state variable, or if you want to show the full lifecycle of an object.

最后，您可以考慮活動圖.如果您想顯示系統中的控制流或對象流，這些特別有用.如果您不熟悉它們，并且簡化到極端，它是一種超級流程圖，但是箭頭不僅代表下一個操作"，還可以代表在操作之間傳遞的對象.

Finally, you can consider the activity diagram. These are especially useful if you want to show the flow of control or of objects across your system. If you're not familiar with them, and to simplify to the extreme, it's a kind of super-flowchart, but where the arrows not jus represent "next operation" but could also represent objects that are passed between operations.

這篇關于Uml/sequence/package/... JavaScript 和 Electron 應用程序的圖表替代方案?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！