Friday, December 15, 2006

JavaScript Properties

One of the most annoying limitations in Javascript - or better say in the java syntax, is that it doesn't support the C#\VB.Net property syntax.
So every time you want to create a property, you must create your own getter & setter like the following:


var _myProp;

getMyProp()
{
    return _myProp;
}
setMyProp(value)
{
    _myProp = value;
}


A couple of days ago I found a neat work-around for this limitation.

First, in the constructor, I'll define a span element which will be the host of our object:


function MyObject(id)
{
    this = document.createElement("span");
    this.id = id;
}


Next, I'll create the MyProp method:


this.MyProperty = function(){ return this._myProperty; }


Notice the behaviour of the MyProperty function is of a getter, now all we need to do is define our setter.

In order to do it, we use the span's onpropertychange event:



this.onpropertychange+=setterProxy;

function setterProxy()
{
    switch (event.propertyName)
    case "otherProperty":
        break;
    case "MyProperty":
        /* Here I can call my setter method */
        eval("setter_" + event.propertyName + "()");
        break;
}


And vuala we've got a getter & a setter just like in C#!

You can download the source-code of this example here

No comments: