Tuesday, March 20th, 2007
Javascript Inheritance Diagrams with GraphViz and Base.js
Category: Utility
T.J. VanSlyke is working on an application using XUL Runner "to deploy a large-scale application platform which requires a hefty Javascript class hierarchy."
T.J. took Dean Edwards Base.js and added Base.exportDotGraph() allowing GraphViz to show the class hierarchy.
However, there is one caveat with this. Since Javascript cannot guess at the identifiers you use to declare each class, we must explicitly define the identifier we would like to use in our diagrams. To maintain backward compatibility, I have simply implemented this as a property of the prototype of the class. The Kale class
-
-
var Kale = Vegetable.extend({
-
constructor: function() {
-
this.base(); // run vegetable constructor
-
// ... kale constructor
-
}
-
});
-
thus becomes:
-
-
var Kale = Vegetable.extend({
-
identifier: "Kale",
-
constructor: function() {
-
this.base(); // run vegetable constructor
-
// ... kale constructor
-
}
-
});
-
We can then feed our example.dot file into dot and generate a PNG image:
dot -Tpng example.dot -o example.png
I really like Dean Edwards base.js. I think mooTools uses it too. I heard that Sam of Prototype was even looking into using it. I wonder what happened with that?
Is this not what __proto__ is for? Though that may be just a Firefox property.