Class diagrams for javascript

[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.


--
Xu, Qian (stanleyxu)

http://stanleyxu2005.blogspot.com

[Lasse Reichstein Nielsen]

Re: Class diagrams for javascript

Thomas 'PointedEars' Lahn <PointedEars@we b.dewrites:

Xu, Qian wrote:

>var Utils = {}
>Utils.somethin g = function() {...}

....

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

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

/L
--
Lasse Reichstein Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Xu, Qian]

Re: Class diagrams for javascript

Thomas 'PointedEars' Lahn wrote:

Xu, Qian wrote:

>var Utils = {}
>Utils.somethin g = 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'.

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

function TDescent(/*args*/) {
TBase.call(this , /*args*/);
//...
}
TDescent.inheri tsFrom(TBase);
Function.protot ype.inheritsFro m = function(parent Class) {
this.prototype = new parentClass;
this.prototype. constructor = this;
this.prototype. __parentClass = parentClass;
return this;
}

It works perfect for me.

>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 want to make some nice class diagrams for my thesis. aptana is an
excellent web-app editor.


--
Xu, Qian (stanleyxu)

http://stanleyxu2005.blogspot.com

[Lasse Reichstein Nielsen]

Re: Class diagrams for javascript

"Xu, Qian" <quian.xu@stud. tu-ilmenau.dewrite s:

For inheritance, I use
>
function TDescent(/*args*/) {
TBase.call(this , /*args*/);
//...
}
TDescent.inheri tsFrom(TBase);
Function.protot ype.inheritsFro m = function(parent Class) {
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(parentCla ss.prototype);

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

/L
--
Lasse Reichstein Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Xu, Qian]

Re: Class diagrams for javascript

Lasse Reichstein Nielsen wrote:

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(parentCla ss.prototype);
>
where clone is defined as something like:
function clone(object) {
function Cloner(){};
Cloner.prototyp e = object;
return new Cloner();
}

Thanks for your advise. ^^)

--
Xu, Qian (stanleyxu)

http://stanleyxu2005.blogspot.com

[Thomas 'PointedEars' Lahn]

Re: Class diagrams for javascript

Xu, Qian wrote:

Thomas 'PointedEars' Lahn wrote:

>Xu, Qian wrote:

>>var Utils = {}
>>Utils.somethi ng = 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'.

>
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.inheri tsFrom(TBase);
Function.protot ype.inheritsFro m = function(parent Class) {
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.protot ype 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.prototyp e 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.prototyp e

When it should have been

new TDescent() ---TBase.prototype ---... ---Object.prototyp e

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.protot ype = 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.prototyp e

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 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 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.croc kford.com/inheritance.htm l>


PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

[Thomas 'PointedEars' Lahn]

Re: Class diagrams for javascript

Thomas 'PointedEars' Lahn wrote:

Xu, Qian wrote:

>TDescent.inher itsFrom(TBase);
>Function.proto type.inheritsFr om = function(parent Class) {
> 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.prototyp e
>
When it should have been
>
new TDescent() ---TBase.prototype ---... ---Object.prototyp e

Sorry, should have been

new TDescent() --TDescent.protot ype --TBase.prototype --...
--Object.prototyp e

[...]
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.prototyp e

Should have been

new TDescent() --TDescent.protot ype --new Cloner() --TBase.prototype
--... --Object.prototyp e


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee