Popular JavaScript Framework Libraries: JQuery, the Yahoo! UI Library (YUI) and MochiKit [con't]
Yahoo! UI Library (YUI)
- URL: https://developer.yahoo.com/yui/
- Blog: https://yuiblog.com/
- Docs: https://developer.yahoo.com/yui/docs/
The Yahoo! User Interface (YUI) Library is a collection of JavaScript and CSS resources that make it easier to build rich and interactive applications in Web browsers, using technologies such as Ajax, DHTML and DOM scripting. Development on YUI began in 2005 and Yahoo! began using YUI in the summer of that year. In February 2006 YUI was released for public use. It's actively developed by a core team of Yahoo! engineers and features extensive API documentation, as well as support on forums.
YUI is comprised of six major components: YUI core, Library utilities, UI controls, CSS components, developer tools and the YUI Compressor.
YUI Core
The YAHOO Global Object is the namespace for all YUI functionality. The core module houses low level classes that are used mainly by YUI Framework code. They are: YAHOO, YAHOO_config, YAHOO.env, YAHOO.env.ua andYAHOO.lang. Having said that, there are some functions that can be of great value to developers.
isBoolean(), isNull(), isNumber(), isArray(), isString(), isUndefined()
and isObject(). How many times have you written code such as if ( x == undefined ) or if (typeof(x) == 'undefined') and wished that there
was a isUndefined() function?
YAHOO.lang.extend provides a simple mechanism for setting up the
prototype, constructor and superclass properties for objects that are extending
other objects. It also prevents the constructor of the extended object (i.e.,
the superclass) from being executed twice. Let's take a look at an example.
The following code assigns a namespace for our classes, creates a Person superclass
and a child Investor class that inherits from it. You can see that code conciseness
is being traded for clarity. Depending on your personal views, you may prefer
a $ sign over YAHOO.test:
DOM Utilities
The YUI DOM utilities are found in the YAHOO.util.Dom singleton
class. Its methods are static, so the class doesn't require instantiation
in order to use them. Simply append the function names to the YAHOO.util.Dom
class to call them. Most DOM methods can be applied to more than one element
in a single call.
Positioning functions include setXY(), getXY(), getX(), setX(),
getY() and setY(). These ensure accurate positioning because page coordinates
are defined in the context of the entire HTML document, including the portions
beyond the browser window.
The getStyle() and setStyle() methods allows you to retrieve and
set properties of a given element's style object. The YUI Framework normalizes
element property names so they're the same across all browsers. For instance,
the opacity property is always specified as such, even though it's applied
in various ways, depending on the browser:
The YUI Dom module provides a number of methods to dynamically manage class names, including:
- getElementsByClassName(className, [tagName], [rootNode])
- hasClass(element, className)
- addClass(element, className)
- removeClass(element, className)
- replaceClass(element, oldClassName, newClassName)
Library Utilities
Next to the UI Controls, this is where most of the YUI's functionality is found. The Library Utilities module contains tools to help you with many commons tasks such as Ajax connections, JSON, animation, browser history, drag & drop and cookies. While there are far too many to cover in detail here, we look at the YUI's Ajax and JSON implementations.
Connection Manager
The Connection Manager is a utility that enables you to make in-page HTTP requests
through a simplified interface to the Ajax XMLHttpRequest object. The Connection
Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the
server response and uses a callback pattern to process the response data. To
create a new asynchronous request using the YUI, we would call the static asyncRequest()
method:
The asyncRequest() method returns a reference to the transaction that can be
referenced later. This method supports the GET, POST and HEAD options of the
HTTP request.
We still need to create a callback object if we want to process the returned data. All of the callback object's properties are optional. In most cases you should supply at least three properties in your callback object:
- success: a function called when the server responds with a valid HTTP response.
- failure: a function called when the server response indicates that a problem, such as an HTTP 404 (file not found) error, has occurred.
- argument: an object, string, number, or array containing data that your success and failure functions might need in order to successfully process the server response.
JSON Utility
The JSON Utility provides methods for working with JSON in JavaScript, providing
JSON-to-string and string-to-JSON conversion and validation. The JSON Utility
extends YAHOO.lang, providing two static methods used for transforming data
to and from JSON string format.
To parse JSON string data into JavaScript data pass a JSON string to YAHOO.lang.JSON.parse(). Optionally, you can provide a second
argument to filter or format the parsed object data.
To convert a JavaScript object (or any permissible value) to a JSON string,
pass that object to YAHOO.lang.JSON.stringify() and capture the returned string:
Find a programming school near you