Over a million developers have joined DZone.

Object Auto Documentation - JavaScript

DZone's Guide to

Object Auto Documentation - JavaScript

· Web Dev Zone ·
Free Resource

Read this guide to learn everything you need to know about RPA, and how it can help you manage and automate your processes.

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:

webfont Google

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

Get the senior executive’s handbook of important trends, tips, and strategies to compete and win in the digital economy.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}