UIZE JavaScript Framework

2010 NEWS 2010-08-03 - NEW MODULE: Uize.Node.Classes

The new Uize.Node.Classes module is a package module with static methods to facilitate manipulation of the value of the className property of DOM nodes, with support for adding classes, removing classes, toggling classes, and lots more.

1. Benefits

1.1. More Elegant, Easier to Read

The methdos of the Uize.Node.Classes module make it much easier to manipulate classes than it would be to use regular expressions, and one's code becomes easier to read and more elegant.

To illustrate this, consider the following example of adding a CSS class to a node's className property...

BEFORE

var node = Uize.Node.getById ('recommendationsPod');
if (!/\bpodPopulated\b/.test (node.className)) {
  node.className += ' podPopulated';
}

AFTER

Uize.Node.Classes.addClass ('recommendationsPod','podPopulated');

As you can see, the code using the Uize.Node.Classes.addClass is much easier to read and understand.

1.2. Powerful State Paradigm

In addition to ease of use, the Uize.Node.Classes module introduces a powerful, higher level construct called a state.

The state related methods that support the state paradigm make it much easier to manage the classes in the className property of a node to reflect application state. Consider an example where you want the CSS class "selected" to be present in the className property of a node with the id of 'recommendationsPod' when the application variable podIsSelected is set to true, and to be absent when the variable is set to false. Your application will have updater code to update the className of the node to reflect the state of the podIsSelected variable. This updater code may not know or trust what the current state of the className property of the node might be, so it may test first to see if the "selected" class should be added or removed. You might write the code as follows...

BEFORE

if (podIsSelected) {
  Uize.Node.Classes.addClass ('recommendationsPod','selected');
} else {
  Uize.Node.Classes.removeClass ('recommendationsPod','selected');
}

Well, the Uize.Node.Classes.setState static method makes this type of update operation a lot simpler. Instead of conditionally adding or removing the class, you simply set its state as follows...

AFTER

Uize.Node.Classes.setState ('recommendationsPod','selected',podIsSelected);

This is a very simple use case, but the state related methods of the Uize.Node.Classes module also support more sophisticated cases.

2. A Safe Introduction

The node class manipulation functionality was not added directly into the Uize.Node module in order to not impact the current size of that module.

In time, these new features may find their way into the base layer modules in some fashion, but a separate new module is an appropriate form in which to feed these new features into the framework without impacting existing code. Going forward, widget classes that wish to use node class name manipulation as a means of reflecting instance state can require the Uize.Node.Classes module and use its methods.