473,385 Members | 1,397 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Class diagrams for javascript

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
Jun 30 '08 #1
6 3183
Thomas 'PointedEars' Lahn <Po*********@web.dewrites:
Xu, Qian wrote:
>var Utils = {}
Utils.something = 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/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jun 30 '08 #2
Thomas 'PointedEars' Lahn wrote:
Xu, Qian wrote:
>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'.
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.

>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
Jul 1 '08 #3
"Xu, Qian" <qu******@stud.tu-ilmenau.dewrites:
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
--
Lasse Reichstein Nielsen
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 1 '08 #4
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(parentClass.prototype);

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

--
Xu, Qian (stanleyxu)
http://stanleyxu2005.blogspot.com
Jul 1 '08 #5
Xu, Qian wrote:
Thomas 'PointedEars' Lahn wrote:
>Xu, Qian wrote:
>>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'.

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 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.crockford.com/inheritance.html>
PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
Jul 1 '08 #6
Thomas 'PointedEars' Lahn wrote:
Xu, Qian wrote:
>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
--
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
Jul 1 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Irlan agous | last post by:
Hello all, I suppose many people use unl for modeling. Does anybody know a free good uml tool to make sequence diagrams, from the use cases? I have use cases described, but i need a tool that...
6
by: Clay Beatty | last post by:
When you create database diagrams in Enterprise Manager, the details for constructing those diagrams is saved into the dtproperties table. This table includes an image field which contains most of...
4
by: clintonG | last post by:
I'd like to know about application(s) or the name by which the following process is referred which would allow a business analyst to enter the following statements which when submitted would result...
0
by: Ole Hanson | last post by:
Hi In the java-world (Eclipse IDE), it is possible to create Class Diagrams from your code and enter this into the documentation (called JDoc). JDoc is simular to NDoc, but to my knowledge NDoc...
3
by: Alberto | last post by:
I have the professional version of visual studio 2005 and I'd like to know if I can create associations between classes in the classes diagram. Thank you.
6
by: Paul McGuire | last post by:
Back in the mid-90's, Kees Blom generated a set of railroad syntax diagrams for Python (http://python.project.cwi.nl/search/hypermail/python-1994q3/0286.html). This pre-dates any Python awareness...
5
by: __PPS__ | last post by:
Hello all, I was working on someone else's code to implement some classes. The task seemed to be simple and I was confident that I won't spent alot of time on that task... But! I've already spent...
5
by: bob | last post by:
Hi, I'm looking for a tool (preferable with a gui but thats not essential) that will generate my class header and .cxx file. i.e. I tell the tool that my class is to have attributes x,y,z, of...
4
by: Ole Nielsby | last post by:
In the old ages when I was taught Pascal, the manual had nice syntax diagrams. Each grammatical structure was shown as round boxes connected by arrows, with a model railway look, with the boxes...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.