yui3 custom modules makes writing modular code easy

August 4, 2011 - 1 minute read -
custom javascript module yui3

There's a number of benefits of writing modular code. Splitting your code into specific modules makes it easier to maintain and allows for greater re-usability.

With yui3 modules, it's dead easy to implement. You include custom modules the same way as built-in modules like 'node' or 'widget'. You just need to specify a YUI_Config, so yui3 knows where to look.

subModule.js:

YUI.add('subModule', function (Y) {
    Y.namespace('subModule');

    //public
    Y.subModule.publicFunction = function() {
        //function code
        //...
    }
},'0.1.1', {requires: ['node']});

mainModule.js:

YUI_config = {
    modules: {
        'subModule': {
            fullpath: '.../subModule.js',
            requires: ['node']
        },

        //more modules
        //...
    },
};

YUI().use('subModule', function (Y) {

    //subModule is available for us to use
    Y.subModule.publicFunction();
});

In the above bare-bones example, mainModule adds in subModule via YUI.use(), so we can call subModule's public functions.

The yui3 loader is super smart. If your module isn't needed, it won't be loaded. This way, you don't have to worry about a huge JavaScript overhead. Just let yui3's global object manage it all for you.

Further Reading:

//developer.yahoo.com/yui/3/yui/