YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: The YUI Global Object: Add Behaviors to Objects with `mix`

## The YUI Global Object: Add Behaviors to Objects with `mix`

Static classes in JavaScript are implemented as object literals with keys corresponding to public class methods. As such, static classes aren't candidates for instantiation or prototype extention. To add functionality to static classes, you need to work with the class's object literal & and that's what YUI's `mix` method helps you to do.

Click the button below to call methods `mix`ed into a static class, then read the tutorial below for more information about using `mix`.

View example in new window.

## Using `mix`

### Instantiate YUI

    <!-- include yui --><script type="text/javascript" src="../../build/yui/yui.js"></script> YUI().use("node", function(Y) {    // This method is in the core of the library, so we don't have to use() any    // additional modules to access it.  However, this example requires 'node'.

    <!-- include yui -->
    <script type="text/javascript" src="../../build/yui/yui.js"></script>

    YUI().use("node", function(Y) {
        // This method is in the core of the library, so we don't have to use() any
        // additional modules to access it.  However, this example requires 'node'.

<!-- include yui --> <script type="text/javascript" src="../../build/yui/yui.js"></script> YUI().use("node", function(Y) { // This method is in the core of the library, so we don't have to use() any // additional modules to access it. However, this example requires 'node'.

### Adding functionality to individual objects

Static classes, such as `DOM`, are implemented as object literals with keys corresponding to public class methods. As such, static classes aren't candidates for instantiation or prototype extention. To add functionality to static classes, you need to work with the class's object literal.

In this example, `mix` is used to add a set of behaviors to a static class.

    var Logging = function () {    var logger = null;     return {        initLogger : function (logNode) {            if (!logger) {                logger = Y.one(logNode);            }        },         log : function (message) {            if (logger) {                logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');            }        }    }}(); var PageController = function () {    var app_const = 12345;     return {         getConst : function () {             return app_const;        },         logConst : function () {            this.initLogger('#demo_logger');            this.log('PageController class constant = ' + this.getConst() +                      ', logged courtesy of object augmentation via Y.mix.');        }    };}(); Y.mix(PageController, Logging); Y.on('click', PageController.logConst, '#demo_btn', PageController);

    var Logging = function () {
        var logger = null;

        return {
            initLogger : function (logNode) {
                if (!logger) {
                    logger = Y.one(logNode);
                }
            },

            log : function (message) {
                if (logger) {
                    logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
                }
            }
        }
    }();

    var PageController = function () {
        var app_const = 12345;

        return {

            getConst : function () {
                return app_const;
            },

            logConst : function () {
                this.initLogger('#demo_logger');
                this.log('PageController class constant = ' + this.getConst() +
                          ', logged courtesy of object augmentation via Y.mix.');
            }
        };
    }();

    Y.mix(PageController, Logging);

    Y.on('click', PageController.logConst, '#demo_btn', PageController);

var Logging = function () { var logger = null; return { initLogger : function (logNode) { if (!logger) { logger = Y.one(logNode); } }, log : function (message) { if (logger) { logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>'); } } } }(); var PageController = function () { var app_const = 12345; return { getConst : function () { return app_const; }, logConst : function () { this.initLogger('#demo_logger'); this.log('PageController class constant = ' + this.getConst() + ', logged courtesy of object augmentation via Y.mix.'); } }; }(); Y.mix(PageController, Logging); Y.on('click', PageController.logConst, '#demo_btn', PageController);

### Much like `augment`

`mix` works in similar fashion to `augment`. In fact, `augment` uses `mix` under the hood. However, rather than adding functionality to class definitions (i.e. function prototypes), `mix` can work with any object, including object literals and class instances.

See `augment` and `extend` for other techniques to help manage your code structure.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings