OO development with MS AJAX

Two days ago i visited a webcast about OO development with the MS AJAX that was given by Rob Bagby. This was a very interesting webcast. I already created some classes of my own in Javascript in combination with MS Ajax scriptlibraries but i made one little mistake in defining my class. The first example below is the class i created before Rob Bagby told me how to do it right.

Type.registerNamespace(“Avanade”);

Avanade.Person = function(firstName, lastName, emailAddress) {
    Avanade.Person.initializeBase(this);
    this. _firstName = firstName;
    this._lastName = lastName;
    this._emailAddress = emailAddress;
   
    this.getFirstName = function() {
        return this._firstName;
    }
   
    this.setFirstName = function(firstName) {
        this._firstName = firstName;
    }

    this.getLastName = function() {
        return this._lastName;
    }
   
    this.setLastName = function(lastName) {
        this._lastName = lastName;
    }

    this.getName = function() {
        return ‘Name: ‘ + this._firstName + ‘ ‘ + this._lastName;
    }
}

Avanade.Person.registerClass(‘Avanade.Person’, Sys.Component);

As you can see i defined my methods and properties inside my constructor. This can work but isn’t the best way to implement it. The code below is the way it should be.

Type.registerNamespace(“Avanade”);

Avanade.Person = function(firstName,lastName,emailAddress) {
    Avanade.Person.initializeBase(this);
    this. _firstName = firstName;
    this. _lastName = lastName;
    this._emailAddress = emailAddress;
    }

Avanade.Person.prototype =
{
    getFirstName: function() {
        return this._firstName;
    },
   
    setFirstName: function(firstName) {
        this._firstName = firstName;
    },

    getLastName: function() {
        return this._lastName;
    },
   
    setLastName: function(lastName) {
        this._lastName = lastName;
    },

    getName: function() {
        return ‘Name: ‘ + this._firstName + ‘ ‘ + this._lastName;
    }
}

Avanade.Person.registerClass(‘Avanade.Person’, Sys.Component);

As you see are my methods and properties defined in the prototype. Prototype is a template that is already available in Javascript. The big difference between the 2 examples is the way that they are instantiated. When you create an object of the first example the object is created and get his own methods and properties. When you do this five times the methods and properties and created five times. When you instatiate an object of the second example there are five objects created but not five time the methods and properties. Because you use a Prototype every object of the same class use the same methods and properties which saves us resources .

Debugging Ajax scriptlibraries

If you are not yet familiair with debugging Javascript and the scriptlibraries that are send to your browser when you are using MS Ajax, well you have to check this out! Thanks to a video demonstration, Dan Wahlin gives us a clear understanding about this subject.