javascript - 设计事件驱动的 JavaScript 应用程序

Question

在设计应用程序时，我总是会看到诸如 UML 类图之类的东西，但如果您的程序不使用类，那么这些似乎毫无用处。以 JavaScript 应用程序为例。如果它是纯粹的事件驱动，您监听“点击”之类的事件，然后触发一个函数作为响应，您如何设计这个？

我听说流程图是一个不错的选择，但这些并没有提供列出所有函数变量的方法。是否有标准方法来设计典型的事件驱动 JavaScript 应用程序？

Answer 1

UML 是基于 OO 的建模语言，但符号是抽象且可扩展的，因此您始终可以使用构造型为标准元素赋予自己的语义。它们甚至不需要是“真实的”类、对象等，就可以在 UML 中建模。

例如，您可以对 C 程序进行建模(C 不是 OO)并为每个 .h 文件使用一个类。这个"new"类(Class)的刻板印象可能是“H”。这为您的模型赋予了具体的含义。

您可以对系统的许多方面进行建模，大致分为结构和行为。

JS 结构: 在 JS 中，您可以使用类来建模 JS 对象及其相关属性和函数。由对象引发的事件可以建模为具有构造型“事件”的函数。

不同的 UI 元素也可以建模为具有相应构造型的类(按钮、列表、表格、组合等)。

您可以使用 UML 依赖关系来对不同 JS 对象(或 namespace ，如果您愿意)之间的依赖关系进行建模。

JS 中的行为 在这里您可以使用序列/通信图来指定不同的场景。甚至事件图、状态图等也可以很方便。

我做了一个简单的例子:http://postimg.org/image/b0ae4g2jf/

这只是一种可能的方法。根据您的具体重点和需求，您可以想到更多。

总之，UML 可以在任何软件开发中为您提供很多帮助，使您的代码更好地结构化，可以帮助您强制使用模块而不是在 JS 中使用全局空间，可以帮助您在编写代码之前考虑一下代码你写吧。还要记录下来。