jQueryUI Widget Skeleton (basic comments only)

jQueryUI Widget Skeleton.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(root.jQuery);
    }
}(this, function ($) {
    
    $.widget('namespace.widgetName', {

        options: {
            // Controls debug output
            // 0:off, 1:errors only, 2:errors and warnings, 3:everything
            'debug': 0, 
            'logger': console,
            // Not necessary in all cases, but a good idea if you want to be
            // able to reinstantiate a widget state from options or on creation
            'state': {}

            // built-in options
            disabled: false,
            // if and how to animate the hiding of the element
            // http://api.jqueryui.com/jQuery.widget/#option-hide
            hide: null,
            // likewise for show
            // http://api.jqueryui.com/jQuery.widget/#option-show
            show: null
        },

        // I typically use this as a place to reference all of the important
        // DOM nodes used by the widget
        nodes: {

        },

        // Called once on instantiation.
        _create: function() {
            this.nodes.originalElement = this.element;
        },

        _init: function() {
            this._trigger('initialized');
        },

        // I find it useful to separate out my event handler logic just for
        // organization and readability's sake, but it's certainly not necessary
        _addHandlers: function() {

        },

        _setOption: function (key, value) {
            // This will actually update the value in the options hash
            this._super(key, value);
            // And now we can act on that change
            switch (key) {
                // Not necessary in all cases, but likely enough to me to include it here
                case "state":
                    this._init();
                    break;
            }
        },

        _destroy: function() {
            // The public destroy method will do some stuff and
            // then invoke this method, so do any extra stuff here 
            // (removing CSS classes, destroying detached nodes, etc)
        },

        // These 3 methods give you an easy way to control debug messages
        _log: function () {
            (this.options.debug === 3) && this._toLoggerMethod('log', arguments);
        },

        _warn: function () {
            (this.options.debug >= 2) && this._toLoggerMethod('warn', arguments);
        },

        _error: function () {
            (this.options.debug >= 1) && this._toLoggerMethod('error', arguments);
        },

       _toLoggerMethod: function(method, args) {
            var args = Array.prototype.slice.call(arguments, 1),
                logger = this.options.logger || console;
            logger.error.apply(logger, args);
        },

        // Obviously only necessary if your widget has a value
        value: function(val) {
            if (val) {
                // set logic here
            } else {
                // get logic here
            }
        },

        disable: function() {
            // Do any custom logic for disabling here, then
            this._super();
        },

        enable: function() {
            // Do any custom logic for enabling here, then
            this._super();
        }

    });
});

This boilerplate template is my starting point for almost all of the jQueryUI widgets I've created. In addition to containing all of the native methods I use on a regular basis, it also provides a few methods I've written/adapted myself that I've found myself using over and over again. Basic comments have been provided to explain any pre-existing logic or non-standard methods.