适当的方式记录或绘制DOM中自定义事件模型的方法

Question

假设您的 Web 应用程序中有许多组件和子组件。您想要跟踪您添加的所有自定义事件的行为。是否有已建立的方法来绘制或记录这些行为？

以下是文档应显示的内容：

1. 各个组件相关 DOM 元素的实际嵌套。 2. 事件的名称以及它们从哪里触发。 3. 任何连接到自定义事件的有效载荷（例如原型自定义事件中的 memo 内容）。 4. 观察事件的位置。 5. 响应其他事件而触发的事件的指示。 6. 允许事件冒泡的位置以及停止事件传播的位置。

- Eric Nguyen

Answer 1

我从未听说过针对Web应用程序前端的已建立的文档标准。

话虽如此，既然您已经确定了要跟踪的应用程序的不同方面，您可以在每个事件处理程序的docblock中保留此信息，并使用jsdoc toolkit生成一些内联文档。

我个人认为，既然您已经知道要记录什么，您应该随意创建适合您的任何格式的文档，即使完全适用于您的应用程序/组织。在stackoverflow上花费8个小时没有答案，这意味着没有标准答案;)

- Steve Goodman

---

好的，谢谢。我可能会尝试适应某种UML图表，或者想出一些新颖的东西。无论如何，我都会在这里分享。 - Eric Nguyen

Answer 2

说实话，我曾经非常喜欢Visual Modeler，当微软将其更换为Visio后，我有些失望。但是，Visio仍然是一个很棒的工具，您可以使用它来创建组件的对象模型，并定义事件、属性、方法等。它还具有一些内置的UML设计功能。不过，最终我通常会使用记事本或MS Word。根据您对文档详细程度的要求，编写组件的注释或描述永远不会像任何DOM工具那样完美，但您可以在Word文档中疯狂地使用加粗、缩进、列表和斜体等格式。听起来有点可悲，但这是真的！

- Mxyzptlk

---

这听起来很有前途。有没有一种特定类型的UML图表可以很好地工作，并且您可以链接到一个示例？对于Web前端世界而言，一个特定的问题是事件冒泡；这似乎超出了我所见过的大多数简单对象模型图表的范畴。 - Eric Nguyen

组件图看起来很像，但不能模拟冒泡方面：http://advanceduml.wordpress.com/the-unified-modeling-language/component-diagrams/ - Eric Nguyen

我不知道有没有截图之类的好网站，但“UML模型图”（Visio 2007）是具有所有事件、属性和方法的那个。 - Mxyzptlk