Separation of presentation from application logic has been a main goal of server-side enterprise frameworks for years. As many server-side template libraries illustrate, however, even presentation logic can require complex code, and separating layout code away from code that adds interactivity to a user interface can be a major challenge.

As interactive Web UIs move increasing amounts of functionality to the client, the separation of HTML and CSS layout code from JavaScript code mirrors similar challenges on the server. In a recent article, Bear Bibeault introduces jQuery, a JavaScript library that has such separation of concerns as one of its key design foundations, Getting Started with jQuery. (jQuery has no relation to server-side Java or to database access.)

jQuery is a general-purpose Ajax library with a distinct design flavor centered around requiring less code from its users:

A self-professed "new type" of JavaScript library, [jQuery] operates from a slightly different viewpoint than other toolkits like Dojo and Prototype. It purports to change the way that you write JavaScript, and quite truly, adopting the jQuery philosophy can make a huge impact on how you develop the script for your pages.

One manifestation of jQuery's design philosophy is its reliance on providing adaptors (wrappers) for DOM elements, as opposed to extending such components with new functionality:

Rather than extending classes, jQuery provides a new class, appropriately named jQuery, that serves as a wrapper around other objects in order to provide extended operations upon those objects. The concept of a wrapper object is not foreign to advanced developers of object-oriented programs. This pattern is often used as an adapter to present an interface for manipulating an object that is different from the original object's interface.

In jQuery, most operations are performed by using the jQuery wrapper around a set of items and calling wrapper methods that operate upon the wrapped items.

Another aspect of jQuery's design is to facilitate the separation of presentation logic code from layout and styling code:

One of the goals of jQuery is to make it easy for page authors to separate script from document markup, much in the same manner that CSS allows us to separate presentation from the document markup. Granted, we could do it ourselves without jQuery's help—after all, jQuery is written in JavaScript and doesn't do anything we couldn't do—but jQuery does a lot of the work for us, and is designed with the goal of easily separating script from document markup. So, rather than adding an onchange event handler directly in the markup of the select element, we'll use jQuery's help to add it under script control.

The rest of Bibeault's article presents a tutorial on loading external HTML fragments into a page, and retrieving data from a server.

What techniques do you use to separate JavaScript code references from HTML and CSS mark-up?