module_extending_base.js

/**
 * A description of the module.
 *
 * @module moodle-FRANKENSTYLE-YUIMODNAME
 */

/**
 * A description of the class. Most of the time, this will be the same as
 * the module, but it is possible to have multiple classes within a single
 * module.
 *
 * @class M.FRANKENSTYLE.ClassName
 * @extends Base
 * @constructor
 */
function ClassName() {
  ClassName.superclass.constructor.apply(this, arguments);
}

var LOGNAME = 'moodle-FRANKENSTYLE-YUIMODNAME',
    WRAPPER = '#somewrapper',
    CLICKEDNODE = '.somebutton',
    SELECTORS = {
        SOMETHING: '.foo',
        SOMETHINGELSE: '.bar'
    },
    CSS = {
        SOMETHING: 'foo',
        SOMETINGELSE: 'bar'
    };

Y.extend(ClassName, Y.Base, {
    /**
     * A description of a property
     *
     * @property propertyName
     * @type String
     * @default null
     * @protected
     */
    propertyName: null,

    /**
     * Lifecycle initializer.
     * This will probably just be used to set up any event listeners.
     * Unless you really *really* need to, do not modify the DOM.
     *
     * @method initializer
     */
    initializer: function() {
        // This call this.doSomething when any node mapping CLICKEDNODE in WRAPPER is clicked. It passes a context of
        // 'this' so that the 'this' variable refers to the current CLASS rather than the CLICKEDNODE in doSomething.
        Y.delegate('click', this.doSomething, WRAPPER, CLICKEDNODE, this);
    },

    /**
     * Lifecycle destructor. If you need this, then write what it's doing.
     * 
     * If you don't need it, remove it.
     *
     * @method destructor
     */
    destructor: function() {
        // Some code here.
    },

    /**
     * This is the doSomething function which handles whatever you're doing.
     *
     * @method doSomething
     * @param {EventFacade} e
     */
    doSomething: function(e) {
        // We probably want to prevent the default browser behaviour here.
        e.preventDefault();

        // Do some other stuff here:

        // Get an attribute (see below).
        this.get('someValue');

        // Set an attribute:
        this.set('someValue', 'banana');

        // Get a property:
        this.propertyName = 'apple';

        // Get a property:
        Y.log(this.propertyName, 'debug', 'moodle-FRANKENSTYLE-YUIMODNAME');

        // Whenever we call Y.log, we need:
        // * a message;
        // * a log category; and
        // * the module name.
        Y.log('This is my message', 'info', 'moodle-FRANKENSTYLE-YUIMODNAME');

        // Other things to consider:

        // You may want to store the the full modname above and use it in Y.log. When the file is minified, it will
        // make the file considerably smaller:
        Y.log('This is my message', 'info', LOGNAME);

    }
}, {
    NAME: 'className',
    ATTRS: {
        /**
         * Some value - this value was passed when we called yui_module:
         *     $PAGE->requires->yui_module('moodle-FRANKENSTYLE-YUIMODNAME', 'Y.M.FRANKENSTYLE.ClassName.init', array(array(
         *         'someValue' => 'the new value'
         *     ));
         *
         * @attribute someValue
         * @default 'the default value'
         * @type String
         */
        someValue: {
            value: 'the default value'
        }
    }
});

// This defines the function which is actually called by Moodle. That's the 'Y.M.FRANKENSTYLE.ClassName.init' in:
// $PAGE->requires->yui_module('moodle-FRANKENSTYLE-YUIMODNAME', 'Y.M.FRANKENSTYLE.ClassName.init', array(array(
//     'someValue' => 'the new value'
// ));
//
// Y.namespace created the full namespace, so specifying:
//     Y.namespace('M.food.fruit.legume.bean')
// will create:
//     Y.M.food.fruit.legume.bean = {}
// The alternative would be:
//     M.food = M.food || {};
//     M.food.fruit = M.food.fruit || {};
//     M.food.fruit.legume = M.food.fruit.legume || {};
//     M.food.fruit.legume.bean = M.food.fruit.legume.bean || {};
//
// We can immediately create a function on the returned object to make life easier too.
//
Y.namespace('M.FRANKENSTYLE.ClassName').init = function(config) {
    return new ClassName(config);
};