Unobtrusive JavaScript

"Unobtrusive JavaScript" is an emerging paradigm in the JavaScript programming language, as used on the World Wide Web. Though the term is not formally defined, its basic principles are generally understood to include:

Most notably, separation of JavaScript functionality (the "behavior layer") from a Web page's structure/content and presentation layers
Disciplined application of best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
Graceful degradation in browsers that are unable to express the behavior layer in the desired manner

The need for a new paradigm

JavaScript has long had a reputation as a clumsy, hackish language unsuitable for serious application development. This has been largely due to inconsistent implementations of the language itself and the Document Object Model in various browsers, and the widespread use of buggy cut-and-paste code written by amateurs. Runtime errors were so common (and so difficult to debug) that few programmers even tried to fix them, as long as the script behaved more or less the way it was supposed to; scripts often failed completely in some browsers.

The recent emergence of standardized browsers, JavaScript frameworks such as Prototype, and the first high-quality debugging tools have made organized, scalable JavaScript code possible, and the emergence of AJAX has made it essential. Whereas JavaScript was once reserved for relatively simple and non-critical tasks such as form validation and decorative novelties, it is now being used to write large, complex codebases that are often part of a site's core functionality. Runtime errors and unpredictable behavior are no longer minor annoyances; they are fatal flaws.

Unobtrusive JavaScript can be seen as part of the larger Web standards movement; much as the demand for cross-browser compatibility has driven the increasing emphasis on standardized markup and style, the increasing demand for rich Internet applications is driving the movement toward the more robust methods of unobtrusive JavaScript.

Separation of behavior from markup

Traditionally, JavaScript often was placed inline together with an HTML document's markup. For example, the following is a typical implementation of JavaScript form validation when written inline:

<input type="text" name="date" onchange="validateDate(this);" />

However, the purpose of markup is to describe a document's structure, not its programmatic behavior. Combining the two negatively impacts a site's maintainability for the same reason that combining content and presentation does: if a site contains hundreds of such date fields, adding the appropriate onchange attribute for each one (and modifying them later, if necessary) can be a labor-intensive process. Furthermore, inline syntax prevents the registration of more than one event handler for the element's onchange event, which can be a problem as the application grows.

The unobtrusive solution is to register the necessary event handlers programmatically, rather than inline. This is commonly achieved by assigning a particular CSS selector to all elements which need to be acted upon by the script:

<input type="text" name="date" />

The script can then look for all input elements with the name date, and set them up accordingly:

Using native JavaScript:

window.onload = function(){ //Wait for the page to load.
    var inputs = document.getElementsByTagName('input'), input;
    for(var i=0,l=inputs.length;i<l;++i){ 
        input = inputs[i];
        if(input.name && input.name=='date'){ 
            input.onchange = function(){ 
                //Do something when the content of the 'input' element with the name 'date' is changed.
            }
        }
    }
};

The following script is specific to the jQuery JavaScript library:

$(function(){ //Wait for the page to load.
	$('input[@name=date]').bind('change',function(){
		//Do something when the content of the 'input' element with the name 'date' is changed.
	});
});

Because the intended purpose of the name attribute is to describe the semantic role of an element, this approach is consistent with modern standards-based markup practices.

Best practices

Though the essence of unobtrusive JavaScript is the concept of a separate behavior layer, advocates of the paradigm generally subscribe to a number of related principles, such as:

Strict adherence to the W3C DOM and event model, and avoidance of browser-specific extensions.
More generally, JavaScript best practices often parallel those in other programming languages, such as encapsulation and abstraction layers, avoidance of global variables, meaningful naming conventions, use of appropriate design patterns, and systematic testing. Such principles are essential to large-scale software development, but have not been widely observed in JavaScript programming in the past; their adoption is seen as an essential component of JavaScript's transition from a "toy" language to a tool for serious development.

External links

The Behaviour Layer: Using JavaScript for good, not evil
Unobtrusive JavaScript
A List Apart: Behavioral Separation
Unobtrusive JavaScript plugin for Ruby on Rails
Unobtrusive Javascript Presentation - Background and overview
AJILE, A JavaScript module that supports Unobtrusive JavaScript development
Behaviour, a JavaScript class library intended to facilitate unobtrusive JavaScript development
fdjs, functional declarative javascript programming
Unobtrusive JavaScript Plugin for the Symfony PHP framework

The need for a new paradigm

Separation of behavior from markup

Best practices

See also

External links