12

我正在寻找一种以图形方式表示 javascript 对象的方法...

我知道有 UML，但例如，如何表示2 个对象之间的链，例如：

var a, b;

a = {};
b = Object.create(a);

直觉上，我会画这样的东西：

+-----+
|b    |
|-----|
|     |
+--+--+
   |     +-----+
   +---->|a    |
         |-----|
         |     |
         +-----+

但是在 UML 中有一个体面的表示吗？

那么mixins呢？

c = $.extend({}, a, b)

+-----+           +-----+
|a    |           |b    |
|-----|           |-----|
|     |<----------|     |
+-----+           +-----+
   +     +-----+
   |     |c    |
   |     |-----|
   +---->|     |
         +-----+
4

3 回答 3

7

您需要知道的第一件事是 JavaScript 使用基于原型的继承。这意味着类和实例之间没有其他 OO 语言（如 Java）中的区别。只有对象。这意味着区分类图和对象图是没有意义的。

对于您的第一个示例：

var a, b;

a = {};
b = Object.create(a);

这是继承-对象b继承对象的属性a。

在 UML 中对此建模的正确方法是此类/对象图：

对象 b 继承自对象 a

Mixins 可以看作是多重继承的一种形式，object继承了 object和c的属性，其图表可能如下所示：ab

对象 c 继承自 a 和 b

于 2012-02-23T13:13:31.360 回答
3

看起来您正试图在类图中显示对象实例之间的关系。这不会真正起作用；您可能想尝试使用 UML 实例图（也可以称为对象图）。类图旨在以静态方式捕获系统概念、它们的结构和它们的关系。从类图开始，然后转到实例图，您可以在对象实例的“槽”或属性中插入一些值，以查看类图中的模型是否有效，这可能会有所帮助。

于 2012-01-18T23:07:38.170 回答
1

您的示例表示对象之间的关系，而不是类，因此 UML 对象图是要走的路（正如 RobertMS 已经指出的那样）。

a在（在第一种情况下） object是 object 的原型的意义上，这些对象相互关联b。我会为此使用依赖关系。Wikipedia在此处对 UML 依赖表示法有很好的描述。

使用依赖的基本原理是它反映了“对影响或独立建模元素的更改可能会影响依赖建模元素的语义”的概念。由于我们经常使用原型对象来保存“依赖”对象（即相同“类”的对象）的集合的默认属性和方法，所以这种依赖的使用似乎是合理的，如果不是有点争议的话。

我会用刻板印象“<<proto>>”标记依赖项。

UML 确实为您提供了很大的灵活性，尽管遵循约定很好。

Scott Ambler在此页面上对对象图进行了很好的处理。

在您的第二个示例中，使用 jQuery 的extend函数，您没有真正的原型关系，但是您正在将某些对象的属性合并到另一个对象中。在这种情况下，我不确定是否有一个特定的总体建模术语。不过，这里有一种依赖性。我建议查看标准 UML 依赖构造型列表（在上面提到的 Wikipedia 页面上列出），看看在您的特定应用程序中是否有任何意义。也许 <<refine>> 适合你？

于 2012-02-27T08:02:48.650 回答