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 :).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: