javascript - Uml/sequence/package/... JavaScript 和 Electron 应用程序的图表替代方案？

Question

我的问题是，是否可以绘制任何类型的图表来可视化 Electron/JavaScript 应用程序？

我需要替代不同的 uml 图，例如类图或包图，但由于 JS 是基于原型(prototype)的，它不像 Java 或 C#，我不知道我能做什么。

我可能唯一能够制作的是顺序图，但我应该(可能必须)制作其他图表。

Answer 1

首先，您根本没有义务在 UML 图中记录所有内容。因为工作软件比综合文档更重要。但是，UML 可以非常有用地突出您的软件的一些不太重要的方面，这些方面不容易在代码中找到。我的建议是关注这些方面。

现在你应该在 UML 中做什么完全取决于你打算在你的模型中表示什么，以及你如何使用 js。

UML区分structure diagrams在您的软件和 behavioural diagrams 上显示静态 View 以显示其动态。

结构图

这对你来说可能没那么有吸引力，因为 JS 是 prototype-based并且在类型逻辑方面提供了很大的灵 active ，这与 UML 的相当静态的基于类的 View 相反。

尽管如此，您仍然可以从类的概念中获益并使用 class diagrams为了显示您的设计意图(即您对对象分类的心理看法)或用于实例化对象的原型(prototype)(尤其是如果你设计一些对象本质上充当原型(prototype)，使它们事实上成为类的代表)。当然，如果您的 JS 设计根本不是面向对象的，那么将您的程序映射到 OO 概念是没有意义的(参见 here)。

请注意遗留 object diagram对你来说可能更有意义，因为它允许解释对象之间的关系而不是类(另请参见 here)

在这两种情况下，您可能对 usage dependencies 特别感兴趣这有助于将静态元素(即对象或类)链接到行为意图。

最后package diagrams例如，可用于显示您的 .js 文件及其依赖项的大图。它不是传统 java 包意义上的，但也可能有用。

行为图

在这里，我假设所有这些图表对您来说都有意义。

我首先想到的是 sequence diagram .因为它有助于可视化多个对象 之间的预期交互，而仅通过浏览代码很难找到这些交互。

在某些情况下，state machine diagram也可以提供帮助。如果行为取决于某个状态变量，或者如果您想要显示对象的完整生命周期，这将特别有意义。

最后，您可以考虑 activity diagram .如果您想显示系统中的控制流或对象流，这些将特别有用。如果您不熟悉它们，并且简化到极致，它是一种 super 流程图，但其中的箭头不仅代表“下一个操作”，还可以代表操作之间传递的对象。