Mapping Dependencies in Javascript
Just today I was asked over in the Mootools forums why we don’t create a dependency map like the one in Mootools. My answer there was, basically, that the common code we publish here on clientside is but a small portion of our library. Our javascript spans numerous teams, sites, and applications, and keeping a map like this by hand is probably not practical.
Then today on Ajaxian there’s this post about T.J. VanSlyke’s alterations to Dean Edward’s Base.js to allow him to generate a dependency map of all the classes he writes. This isn’t quite the same as mapping out file-by-file dependencies, but it’s a start. Considering that Mootools is largely based on Base.js, this shouldn’t be too hard to incorporate over there.
Via Ajaxian:
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:
No TweetBacks yet. (Be the first to Tweet this post)Follow @clientcide on twitter to get notified of new posts.
To follow me personally on twitter, follow @anutron.
