Page 1 of 4   next page »

The publicity that AJAX grabbed over the last half a year is based on closing the gap between the Web applications and the desktop applications, combining the "reach" and "rich." At the same time, the gap between the technological level of AJAX and what corporate developers expect in their modern arsenal is really astonishing. After all, AJAX is neither a tool nor a platform. There is no AJAX standards committee or community process in place. While software vendors are crafting proprietary development platforms on top of AJAX (which pretty much means "from scratch"), early adopters of AJAX are left on their own.

In Part 1 (JDJ, Vol. 10, issue 9) we touched on the foundation of AJAX - the ability to establish script-to-server communication. This is what makes HTML pages dynamic and responsive. Does it mean we are ready to kick-off our own version of Yahoo mail? No, we are not. Here is why: AJAX is a mixed blessing. On one hand it enables us to create rich, desktop-class applications on the Web. On the other, if we compare "page-flipping" Web applications with the client/server or Swing ones, the development practices are not quite the same. What about management expectations? We'll need to get used to the fact that it takes time to build a rich UI. The more flexibility with more permutations the user is allowed - the more time it takes.

The answer, of course, is component libraries, frameworks, and industrial-strength tools. Leaving tools aside, this article concentrates on what is available for AJAX enthusiasts today. Addressing a need to build reusable business components, it focuses on the "hidden" object-oriented power of JavaScript. Also, by addressing a need to build custom-rich UI components, it illustrates a convenient way to encapsulate presentation logic in custom client-side HTML tags.

AJAX Language: Object-Oriented JavaScript
By definition, JavaScript is the language of classic AJAX. Unlike Java, JavaScript does not enforce the OO style of coding. That said, it's surprising how often it's overlooked that Java-Script fully supports all the major attributes of an OO language: inheritance, polymorphism, and encapsulation. Douglas Crockford even named Java Script "The World's Most Misunderstood Programming Language." Let's review the object-oriented side of JavaScript.

Data Types
In Java, a class defines a combination of data and its associated behaviors. While JavaScript reserves the class keyword, it does not support the same semantic as in conventional OOP languages.

It may sound strange but in JavaScript, functions are used as object definitions. By defining a function in the example below you, in fact, define a simple empty class - Calculator:

function Calculator() {}

A new instance is created the same way as in Java - by using the new operator:

var myCalculator = new Calculator();

The function not only defines a class, but also acts as a constructor. The operator new does the magic, instantiating an object of class Calculator and returning an object reference in contrast to merely calling the function.

Creating an empty class is nice but not really useful in real life. We are going to fill-in the class definition using a Java-Script prototype construct. JavaScript uses prototype to serve as a template for object creation. All prototype properties and methods are copied by reference into each object of a class, so they all have the same values. You can change the value of a prototype property in one object, and the new value overrides the default, copied from the prototype, but only in that one instance. The following statement will add a new property to the prototype of the Calculator object:

Calculator.prototype._prop = 0;

Since JavaScript does not provide a way to syntactically denote a class definition, we'll use the with statement to mark the class definition boundaries. This will also make the example code smaller as the with statement is allowed to perform a series of statements on a specified object without qualifying the attributes.

function Calculator() {};
with (Calculator) {
   prototype._prop = 0;
   prototype.setProp = function(p) {_prop = p};
   prototype.getProp = function() {return _prop};
}

So far we have defined and initialized the public _prop variable as well as provided getter and setter methods for it.

Need to define a static variable? Just think of the static variable as being a variable owned by the class. Because classes in JavaScript are represented by function objects, we just need to add a new property to the function:

Calculator.iCount = 0;

Now that the iCount variable is a property of the Calculator object, it will be shared between all instances of the class calculator.

function Calculator() {Calculator.iCount++;};

The above code will count all created instances of the class Calculator.

Encapsulation
Using "Calculator", as defined above, permits access to all the "class" data, increasing the risk of name collisions in inherited classes. We clearly need encapsulation to view objects as self-contained entities.

A standard language mechanism of data encapsulation is private variables. And a common JavaScript technique for emulating a private variable is to define a local variable in the constructor, so that this local variable is accessible exclusively via getter and setter - inner functions of the very same constructor. In the following example, the _prop variable is defined within the Calculator function and is not visible outside of the function scope. Two anonymous inner functions, assigned to setProp and getProp attributes, provide access to our "private" variable. Also, please note the use of this, quite similar to how it is used in Java:

function Calculator() {
   var _prop = 0;
   this.setProp = function (p){_prop = p};
   this.getProp = function() {return _prop};
};

What is often overlooked is the cost of such encapsulation in JavaScript. It can be tremendous, because inner function objects get repeatedly created for each instance of the "class".

Accordingly, since constructing objects based on the prototype is faster and consumes less memory, we cast our vote in favor of public variables wherever performance is critical. You can use naming conventions to avoid name collisions, for example, by prefixing public variables with the class name.

Inheritance
At first glance, JavaScript lacks support for the class hierarchy similar to what programmers of conventional object-oriented languages expect from the modern language. However, although JavaScript syntax does not support class inheritance as in Java, inheritance can still be implemented by copying an instance of a previously defined class into the prototype of the derived one.

Before we provide an illustration, we need to introduce a constructor property. JavaScript makes sure that every prototype contains constructor, which holds a reference to the constructor function. In other words, Calculator.prototype.constructor contains a reference to Calculator().

Page 1 of 4   next page »