Unobtrusive JavaScript
"Unobtrusive Javascript" is an emerging paradigm in the JavaScript programming language, as used on the World Wide Web. Though the term has not been formally defined, its basic principles are generally understood to include:
- 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.
Separation of behavior from markup
Traditionally, most JavaScript is written inline, as part of an HTML document's markup. For example, the following is a typical implementation of JavaScript form validation:
<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 us from registering more than one event handler for the element's onchange event, which can be a problem as our 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 class to all elements which need to be acted upon by our script:
<input type="text" name="date" class="datefield" />
The script can then look for all elements with the class datefield, and set them up accordingly:
// Register onchange event handlers for all datefield elements
// This script uses objects and methods specific to the Prototype library
datefields = document.getElementsByClassName("datefield");
for ( i=0; i<datefields.length; i++ ) {
Event.observe( datefields[i], "change", validateDate );
}
Because the intended purpose of the class attribute is to describe the semantic role of an element, this approach is consonant with modern standards-based markup practices.
Best practices
This aspect of the paradigm includes:
- 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.