Class diagrams for javascript

X

Xu, Qian

Hello All,

is there any handy tool to generate class diagrams for javascript? I
have tried JS/UML, but it generates always an empty diagram.
 
T

Thomas 'PointedEars' Lahn

is there any handy tool to generate class diagrams for javascript? I
have tried JS/UML, but it generates always an empty diagram.

You should read <http://www.jsuml.org/> (more) thoroughly.

For a class diagram there need to be classes first. "javascript" as you
probably understand it have none, these are *languages*[1] using and
providing prototype-based inheritance.[2] (ECMAScript Edition 1 to 3-based.
AFAIK, server-side Microsoft JScript .NET [7.0] (2002) was the first[3] to
implement a Netscape proposal for ECMAScript Ed. 4 that introduced
classes[4], Macromedia/Adobe ActionScript 2.0 followed.[5])

Consequently, JS/UML defines tokens in the code as a class (that are not) in
order to generate the diagram. Which code styles ("filters") are supported
is described on its Web site. If you do not follow one of these, your
"class diagram" will be empty. But it would not be a good idea jumping
through the hoops of frameworks just to get what does not make sense in the
used languages in the first place. Especially as at least one of them,
Prototype.js, is junk. (I don't know Dojo and YUI enough to make an
assessment, but from what I have read here by people I consider accomplished
software developers, I don't put much confidence in them either. YUI may
have the additional benefit of Douglas Crockford peer-reviewing it regularly
as he works at Yahoo!; then again, it may not.)


HTH

PointedEars
___________
[1] <http://PointedEars.de/es-matrix/>
[2] <http://javascript.crockford.com/javascript.html>
<http://en.wikipedia.org/wiki/Prototype-based_programming>

<http://groups.google.com/groups?as_...group=comp.lang.javascript&scoring=d&filter=0>
[3] <http://en.wikipedia.org/wiki/.NET_Framework#.NET_Framework_1.0>
[4]
<http://web.archive.org/web/20070612182518/http://www.mozilla.org/js/language/es4/>
[5] <http://de.wikipedia.org/wiki/ActionScript#ActionScript_2>
 
X

Xu, Qian

Thomas said:
is there any handy tool to generate class diagrams for javascript? I
have tried JS/UML, but it generates always an empty diagram.

You should read <http://www.jsuml.org/> (more) thoroughly.

For a class diagram there need to be classes first. "javascript" as you
probably understand it have none, these are *languages*[1] using and
providing prototype-based inheritance.[2] (ECMAScript Edition 1 to 3-based.
AFAIK, server-side Microsoft JScript .NET [7.0] (2002) was the first[3] to
implement a Netscape proposal for ECMAScript Ed. 4 that introduced
classes[4], Macromedia/Adobe ActionScript 2.0 followed.[5])

Consequently, JS/UML defines tokens in the code as a class (that are not) in
order to generate the diagram. Which code styles ("filters") are supported
is described on its Web site. If you do not follow one of these, your
"class diagram" will be empty. But it would not be a good idea jumping
through the hoops of frameworks just to get what does not make sense in the
used languages in the first place. Especially as at least one of them,
Prototype.js, is junk. (I don't know Dojo and YUI enough to make an
assessment, but from what I have read here by people I consider accomplished
software developers, I don't put much confidence in them either. YUI may
have the additional benefit of Douglas Crockford peer-reviewing it regularly
as he works at Yahoo!; then again, it may not.)


HTH

PointedEars
___________
[1] <http://PointedEars.de/es-matrix/>
[2] <http://javascript.crockford.com/javascript.html>
<http://en.wikipedia.org/wiki/Prototype-based_programming>

<http://groups.google.com/groups?as_...group=comp.lang.javascript&scoring=d&filter=0>
[3] <http://en.wikipedia.org/wiki/.NET_Framework#.NET_Framework_1.0>
[4]
<http://web.archive.org/web/20070612182518/http://www.mozilla.org/js/language/es4/>
[5] <http://de.wikipedia.org/wiki/ActionScript#ActionScript_2>

Thanks for pointing out the issue: My code does not fit its filter.
My code looks like

var Utils = {}
Utils.something = function() {...}

I found an eclipse based tool "aptana". It can parse my code properly,
but no class diagram generation. I am still searching. Thanks again.
 
T

Thomas 'PointedEars' Lahn

Thomas said:
For a class diagram there need to be classes first. "javascript" as you
probably understand it have none, these are *languages*[1] using and
providing prototype-based inheritance.[2] [...]

Consequently, JS/UML defines tokens in the code as a class (that are not) in
order to generate the diagram. Which code styles ("filters") are supported
is described on its Web site. If you do not follow one of these, your
"class diagram" will be empty. But it would not be a good idea jumping
through the hoops of frameworks just to get what does not make sense in the
used languages in the first place. [...]

Thanks for pointing out the issue: My code does not fit its filter.
My code looks like

var Utils = {}
Utils.something = function() {...}

Why, I wonder how you would set up *inheritance* *easily* with *that* pattern.

BTW, as `Utils' cannot be used as a constructor reference, it should be `utils'.
I found an eclipse based tool "aptana". It can parse my code properly,
but no class diagram generation.

But what would/could you need this for?
I am still searching. Thanks again.

Good luck, and you are welcome. But *please* trim your quotes to the
necessary minumum to retain context (as you can see above) next time.

<http://www.jibbering.com/faq/faq_notes/clj_posts.html>


PointedEars
 
L

Lasse Reichstein Nielsen

Thomas 'PointedEars' Lahn said:
....
BTW, as `Utils' cannot be used as a constructor reference, it should be `utils'.

Well, there is the precedent of "Math" :)

/L
 
X

Xu, Qian

Thomas said:
Why, I wonder how you would set up *inheritance* *easily* with *that* pattern.

BTW, as `Utils' cannot be used as a constructor reference, it should be `utils'.

This is a static class library.
For inheritance, I use

function TDescent(/*args*/) {
TBase.call(this, /*args*/);
//...
}
TDescent.inheritsFrom(TBase);
Function.prototype.inheritsFrom = function(parentClass) {
this.prototype = new parentClass;
this.prototype.constructor = this;
this.prototype.__parentClass = parentClass;
return this;
}

It works perfect for me.

But what would/could you need this for?

I want to make some nice class diagrams for my thesis. aptana is an
excellent web-app editor.
 
L

Lasse Reichstein Nielsen

Xu said:
For inheritance, I use

function TDescent(/*args*/) {
TBase.call(this, /*args*/);
//...
}
TDescent.inheritsFrom(TBase);
Function.prototype.inheritsFrom = function(parentClass) {
this.prototype = new parentClass;
this.prototype.constructor = this;
this.prototype.__parentClass = parentClass;
return this;
}

It works perfect for me.

I would question the line
this.prototype = new parentClass;
It means that you run the "parent" construcor function twice:
once in this line, and once in the actual constructor using "call".

It would be more correct to clone the parentClass prototype, i.e.,
this.prototype = clone(parentClass.prototype);

where clone is defined as something like:
function clone(object) {
function Cloner(){};
Cloner.prototype = object;
return new Cloner();
}

/L
 
X

Xu, Qian

Lasse said:
I would question the line
this.prototype = new parentClass;
It means that you run the "parent" construcor function twice:
once in this line, and once in the actual constructor using "call".

It would be more correct to clone the parentClass prototype, i.e.,
this.prototype = clone(parentClass.prototype);

where clone is defined as something like:
function clone(object) {
function Cloner(){};
Cloner.prototype = object;
return new Cloner();
}

Thanks for your advise. ^^)
 
T

Thomas 'PointedEars' Lahn

This is a static class library.

No, it is not. As is said twice before now, there are no classes. So there
are also no static classes.
TDescent.inheritsFrom(TBase);
Function.prototype.inheritsFrom = function(parentClass) {
this.prototype = new parentClass;
this.prototype.constructor = this;
this.prototype.__parentClass = parentClass;
return this;
}

I use a similar pattern but there is still no class. If TDescent() was used
as a constructor (with `new') an object would be created that inherits from
another object (the object TDescent.prototype refers to) through its
prototype chain, not from a class. And the other object again inherits from
yet another next object in its prototype chain, which supposedly inherits
from the object that Object.prototype refers to. (There you have the
fundamental difference between class-based and prototype-based inheritance.)

With your code, you are setting up the following prototype chain:

new TDescent() ---> new TBase() ---> ... ---> Object.prototype

When it should have been

new TDescent() ---> TBase.prototype ---> ... ---> Object.prototype

That is, with the current pattern TDescent objects inherit from a newly
created TBase object (not only with the properties they inherit from their
prototype, TBase.prototype, but with any modifications made to them in the
TBase() constructor). This can have undesired side-effects:

function TBase(foo)
{
if (!foo) this.bar = 42;
}

TBase.prototype = {
constructor: TBase
};

Now, since you essentially use

TDescent.prototype = new TBase();

all objects created with the constructor `TDescent', like

var o = new TDescent();

would have the `bar' property although it is not defined in TBase's
prototype object.

Hence Lasse's correctly recommending (again) to "clone" the prototype object
instead, IOW inserting a dummy object with no additional properties in the
prototype chain that has TBase.prototype as its prototype:

new TDescent() --> new Cloner() --> TBase.prototype --> ...
--> Object.prototype
For inheritance, I use

function TDescent(/*args*/) {
TBase.call(this, /*args*/);
//...
}

This is a constructor for an object in which another constructor is called.
No classes here.
I want to make some nice class diagrams for my thesis. aptana is an
excellent web-app editor.

The quality of Aptana is not under discussion here. The languages you are
writing your code in (ECMAScript Ed. 3 implementations) simply do not use or
provide class-based inheritance. You can emulate that to a certain degree,
but it will never be the same. A simple example:

var o = new TDescent();
o.answer = 42;

Now `o' has a property named `answer' although you would misguidedly
probably say it is an "instance of the class TDescent".

<http://javascript.crockford.com/inheritance.html>


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
TDescent.inheritsFrom(TBase);
Function.prototype.inheritsFrom = function(parentClass) {
this.prototype = new parentClass;
this.prototype.constructor = this;
this.prototype.__parentClass = parentClass;
return this;
}

I use a similar pattern but there is still no class. [...]

With your code, you are setting up the following prototype chain:

new TDescent() ---> new TBase() ---> ... ---> Object.prototype

When it should have been

new TDescent() ---> TBase.prototype ---> ... ---> Object.prototype

Sorry, should have been

new TDescent() --> TDescent.prototype --> TBase.prototype --> ...
--> Object.prototype
[...]
Hence Lasse's correctly recommending (again) to "clone" the prototype object
instead, IOW inserting a dummy object with no additional properties in the
prototype chain that has TBase.prototype as its prototype:

new TDescent() --> new Cloner() --> TBase.prototype --> ...
--> Object.prototype

Should have been

new TDescent() --> TDescent.prototype --> new Cloner() --> TBase.prototype
--> ... --> Object.prototype


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,175
Latest member
Vinay Kumar_ Nevatia
Top