Tom White's Blog: Open Source Archives

One of the things that writing Object Oriented systems encourages you to consider is: what is the responsibility of each class in the system? For example, the Model-View-Controller pattern separates responsibility for the user model, the user interface, and the control logic into three classes. So far, so old hat. Well, perhaps not in the world of Web Development. While AJAX sets the world alight, there is a related re-awakening in JavaScript's relation to (X)HTML and CSS.

It may seem obvious that HTML is the model, CSS the view, and JavaScript the controller, but how many times have you seen this kind of mess?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Behaviour demo</title>
  </head>
  <body onload="document.getElementById('textbox').focus(); return false;">
    <form id="form" action="results.html" method="get">
      <p>
        <input type="text" id="textbox" name="query" />
        <input type="submit" id="submit" value="Go"
          onclick="this.value='Searching...'; document.getElementById('form').submit();" />
      </p>
    </form>
  </body>
</html>

While we're all carefully making sure the server-side stuff is all Model 2 compliant, we're churning out tangled up code at the web layer. Those onload and onclick attributes really stick out. It feels wrong, but we haven't been sure how to fix it.

Powered by
Movable Type 3.01D

java.net RSS Feeds