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 回答