MooTools Classes and JsDoc

Question

I have the following Moo class:

Nem.Ui.Window = new Class({
    Implements: [Options, Events],

    options: {
        caption:    "Ventana",
        icon:       $empty,
        centered:   true,
        id:         $empty,
        width:      $empty,
        height:     $empty,
        modal:      false,
        desktop:    $empty,
        x:          $empty,
        y:          $empty,
        layout:     $empty
    },

    initialize: function(options)
    {
        this.setOptions(options);
        /* ... */
    },

    setHtmlContents: function(content)
    {
        /* ... */
    },

    setText: function(text)
    {
        /* ... */
    },

    close: function(win)
    {
        /* ... */
    },

    /* ... */
});

I want to document it with JsDoc. I read you can use @lends [class].prototype inside new Class and mark initialize with the @constructs tag. How can I mark methods and events such?

I.E.: setHtmlContents should be a method, close should be an event.

Also, can the elements under options be documented, somehow?

Answer 1

You can mark methods with @function and events with @event, but since functions are detected correctly by default the @function tag won't be neccessary in your case.

The elements under options can be documented with @memberOf, in your example with @memberOf Nem.Ui.Window#. They will then be shown as options.optionName in the generated JSDoc.

A fully documented version of your class would be something like

/** @class This class represents a closabe UI window with changeable content. */
Nem.Ui.Window = new Class(
/** @lends Nem.Ui.Window# */
{
    Implements: [Options, Events],

    /** The options that can be set. */
    options: {
        /**
         * Some description for caption.
         * @memberOf Nem.Ui.Window#
         * @type String
         */
        caption:    "Ventana",
        /**
         * ...
         */
        icon:       $empty,
        centered:   true,
        id:         $empty,
        width:      $empty,
        height:     $empty,
        modal:      false,
        desktop:    $empty,
        x:          $empty,
        y:          $empty,
        layout:     $empty
    },

    /**
     * The constructor. Will be called automatically when a new instance of this class is created.
     *
     * @param {Object} options The options to set.
     */
    initialize: function(options)
    {
        this.setOptions(options);
        /* ... */
    },

    /**
     * Sets the HTML content of the window.
     *
     * @param {String} content The content to set.
     */
    setHtmlContents: function(content)
    {
        /* ... */
    },

    /**
     * Sets the inner text of the window.
     *
     * @param {String} text The text to set.
     */
    setText: function(text)
    {
        /* ... */
    },

    /**
     * Fired when the window is closed.
     *
     * @event
     * @param {Object} win The closed window.
     */
    close: function(win)
    {
        /* ... */
    },

    /* ... */

});

I've skipped the @constructs at initialize since it won't show up in the doc at all then and I haven't figured out how to get this to work properly, yet.

For more information about the available tags and their functionality see the TagReference at the wiki of the jsdoc-toolkit.