One particular thing that I like about backbone.js is how elegant and well organized is the documentation. Other project that caught my attention few days ago was selfDoc.js I liked the idea of self documentation.

That trigger me to build simple function that will display all methods inside object (backbone style). Important thing was to potentiate code readability and clearness.

The object methods names are listed in alphabetical order on the left and the methods and the code on the right.

The logic that extracts the methods from the object is based on Object.keys. The object methods code formatting are not changed from the original code.

Basically how all this works is you download and put docJS.js and style.css and then include the library or object you want to auto document example docJS(jQuery,"jQuery");

Here is demo using jQuery object

You additionally use the browser console for further profiling. Example: open the previous demo and inside browser console write docJS(jQuery.prototype,"optional")

I build this project for auto document some of my JS libraries but surprise me how cool this tool can be for learning and disassembling other JS libraries.

Here are ten objects from ten different JS projects:

jQuery
dojo
Ext
fuse
Modernizr2
mootools
prototype.js
swfobject
webfont Google
YUI
Zepto

I think this demos show how easy you can profile and object anywhere on the web. Also you can use this tool for learning from other JavaScript libraries. Works in Safari, Chrome and FF4.

Download Watch Fork this project on GitHub
 

From http://www.vcarrer.com/2011/06/object-auto-documentation-javascript.html