YUI Library Examples: YAHOO Global Object: Add Behavior to Objects or Static Classes with <code>YAHOO.lang.augmentObject</code>

YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: YAHOO Global Object: Add Behavior to Objects or Static Classes with `YAHOO.lang.augmentObject`

# YAHOO Global Object: Add Behavior to Objects or Static Classes with `YAHOO.lang.augmentObject`

Click the button below to call methods on an augmented static class.

## YAHOO.lang is packaged with the YAHOO Global Object

`YAHOO.lang` comes bundled with the YAHOO Global Object.

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-min.js"></script>

If you are using any other YUI component on your page, you should already have YAHOO.lang available.

## Adding functionality to individual objects

Static classes, such as `YAHOO.util.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, `augmentObject` is used to add a set of behaviors to a static class.

We'll create a namespace `YAHOO.example.addons` to hold common packages of static methods and members. In this namespace, we'll create a set of logging functions.

YAHOO.namespace('example.addons'); YAHOO.example.addons.Logging = function () { var logger = null; // public methods return { initLogger : function (logNode) { if (!logger) { logger = YAHOO.util.Dom.get(logNode); } }, log : function (message) { if (logger) { logger.innerHTML += '<p>' + message + '</p>'; } } } }(); // Execute the function, returning the object literal

Now a targeted class that would benefit from these methods can add them using `augmentObject` while keeping its source focused and unique.

// Static class with greater purpose YAHOO.example.PageController = function () { var app_const = 12345; // Public API return { getConst : function () { return app_const }, logConst : function () { this.initLogger('demo_logger'); this.log('PageController class constant = ' + this.getConst() + '. Logged courtesy of augmentation'); } }; }(); // Augment PageController with the Logging methods YAHOO.lang.augmentObject( YAHOO.example.PageController, YAHOO.example.addons.Logging); YAHOO.util.Event.on('demo_btn','click', YAHOO.example.PageController.logConst, YAHOO.example.PageController, true);

## Much like `YAHOO.lang.augmentProto`

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

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

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YAHOO Global Object Examples:

- Type-Checking Your Data
- User Agent Detection
- Creating Class Hierarchies with `YAHOO.lang.extend`
- Creating a Composition-Based Class Structure Using `YAHOO.lang.augmentProto`
- Add Behavior to Objects or Static Classes with `YAHOO.lang.augmentObject`
- Combining Simple Data Sets with `YAHOO.lang.merge`

### More YAHOO Global Object Resources:

- User's Guide (external)
- API Documentation

Copyright © 2010 Yahoo! Inc. All rights reserved.

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