394

CHAPTER 10

Type-ahead suggest

covered as well. As for the rest, we’ve got some work to do. We have only a week, so we’d better get started.

10.5.1 Day 1: developing the TextSuggest component game plan

The first thing to decide is how to boost productivity to accommodate the short time schedule. One of the best ways to do this is by leveraging the work of others. If someone else can do some of the work, that’s less for us to do. So for this component, we’re going to leverage the open source efforts of Rico (http://openrico.org) and by extension Prototype.js (http://prototype.conio.net/). Rico provides some Ajax infrastructure, effects, and utility methods that will boost our development speed. Prototype provides some infrastructure for nice syntactic idioms that will make our code look cleaner and also take less time to develop. Let’s take a look at the implications of using Prototype and Rico.

Prototype

Prototype provides developers with a few extensions to the core JavaScript object as well as a few functions that make for a nice coding style. Here are the ones we’ll use in this example:

The Class object

The Class object introduced in the Prototype library has a single method called create(), which has the responsibility of creating instances that can have any number of methods. The create() method returns a function that calls another method in the same object named initialize(). It sounds complicated from the inside, but in practical use, it is straightforward. What this effectively does is create a syntactical way for specifying types in JavaScript. The idiom is as follows: var TextSuggest = Class.create();

TextSuggest.prototype = {

initialize: function( p1, p2, p3 ) {

Called during construction

},

...

};

This segment of code creates what we can think of as a “class” (even though the language itself doesn’t support such a concept) and defines a constructor function named initialize(). The client of the component can create an instance via this line of code:

var textSuggest = new TextSuggest(p1, p2, p3);

Licensed to jonathan zheng

Refactoring

395

The extend() method

The Prototype library extends the JavaScript base object and adds a method to it named extend(), thus making this method available to all objects. The extend() method takes as its parameters two objects, the base object and the one that will extend it. The properties of the extending object are iterated over and placed into the base object. This allows for a per-instance object extension mechanism. We’ll exploit this later when we implement the default values of the configurability parameters of the TextSuggest component. The bind/bindAsEventListener() method

The Prototype library also adds two methods to the Function object called bind() and bindAsEventListener(). These methods provide a syntactically elegant way to create function closures. You will recall other examples where we created closures, such as oThis = this;

this.onclick = function() { oThis.callSomeMethod() };

With the bind() method of Prototype, this can be expressed more simply as this.onclick = this.callSomeMethod.bind(this);

The bindAsEventHandler() API passes the Event object to the method and normalizes the differences between IE and the W3C standard event model to boot!

The $ method—syntactic sugar

A little-known fact about JavaScript is that you can name methods with certain special characters, such as the dollar sign ($). The Prototype library did just that to encapsulate one of the most common tasks in DHTML programming, namely, getting an element out of the document based on its ID. So, in our code we will be able to write constructs such as

$('textField').value = aNewValue;

rather than

var textField = document.getElementById('textField')

textField.value = aNewValue;

Rico

We got Prototype