lunes, 3 de enero de 2011

POO en Javascript con ASP.NET AJAX

En anteriores post, POO en Javacript I, II y III, expusimos los principios de la programación orientada a objetos en Javascript y además también vimos como ASP.NET AJAX nos proporciona un marco de trabajo que extiende la funcionalidad de Javascript, tanto en sus objetos básicos como a través de un conjunto de librerías que nos proporcionan funcionalidades avanzadas. Ahora ha llegado el momento de dar el salto a la POO en Javascript ayudándonos de ASP.NET AJAX y sus extensiones.

En nuestro primero ejemplo registraremos un espacio de nombres, después crearemos un clase y finalmente registraremos la clase en el espacio de nombres creado.

            //Registrar espacios de nombres.

            Type.registerNamespace("Alimentos.Frutas");

 

            //Constructor de la clase Tropical.

            Alimentos.Frutas.Tropical = function (color) {

                //Por convención, las propiedades y métodos que comiencen con _ son privados.

                this._color = color;

            };

 

            //Definición de la clase Tropical.

            Alimentos.Frutas.Tropical.prototype = {

                getColor: function () {

                    return this._color;

                },

                setColor: function (color) {

                    this._color = color

                },

                toString: function () {

                    return "color: " + this.getColor();

                }

            };

 

            //Registrar la clase Tropical.            Alimentos.Frutas.Tropical.registerClass("Alimentos.Frutas.Tropical");

 

            var kiwi = new Alimentos.Frutas.Tropical("verde");

            alert(kiwi.getColor()); //verde

            alert(kiwi.toString()); //color: verde

 

clip_image001

Un siguiente ejemplo tratará sobre clases base y clases hija y sobre como ASP.NET AJAX nos ayuda en este concepto.

            //Registrar espacios de nombres.

            Type.registerNamespace("Alimentos.Frutas");

 

            //Constructor de la clase Tropical.

            Alimentos.Frutas.Tropical = function (color) {

                //Por convención, las propiedades y métodos que comiencen con _ son privados.

                this._color = color;

            };

 

            //Definición de la clase Tropical.

            Alimentos.Frutas.Tropical.prototype = {

                getColor: function () {

                    return this._color;

                },

                setColor: function (color) {

                    this._color = color;

                },

                toString: function () {

                    return "color: " + this.getColor();

                }

            };

 

            //Registrar la clase Tropical.            Alimentos.Frutas.Tropical.registerClass("Alimentos.Frutas.Tropical");

 

            //Constructor de clase Mango.

            Alimentos.Frutas.Mango = function (color, estado) {

                //En la clase hija se llama al método initializeBase.

                Alimentos.Frutas.Mango.initializeBase(this, [color]);

                this._estado = estado;

            }

 

            //Definición de clase Mango.

            Alimentos.Frutas.Mango.prototype = {

                getEstado: function () {

                    return this._estado;

                },

                setEstado: function (estado) {

                    this._estado = estado;

                },

                toString: function () {

                    //Desde una clase hija se llama a métodos de la clase base con el método callBaseMethod.

                    return Alimentos.Frutas.Mango.callBaseMethod(this, 'toString') + ", estado: " + this.getEstado();

                }

            }

 

            //Registrar una clase hija, especificando la clase base.            Alimentos.Frutas.Mango.registerClass("Alimentos.Frutas.Mango", Alimentos.Frutas.Tropical);

 

            var mango = new Alimentos.Frutas.Mango("verde", "bien");

            alert(mango.getColor()); //llamada a un método heredado, verde.

            alert(mango.getEstado()); //bien.           

            alert(mango.toString()); //color: verde, estado: bien.

 

Por último, algo que utilizo muchísimo en VB.NET y que echo en falta en Javascript son las enumeraciones.

            //Registrar espacios de nombres.

            Type.registerNamespace("Alimentos.Frutas");

 

            //Constructor de la clase Tropical.

            Alimentos.Frutas.Tropical = function (color) {

                //Por convención, las propiedades y métodos que comiencen con _ son privados.

                this._color = color;

            };

 

            //Definición de la clase Tropical.

            Alimentos.Frutas.Tropical.prototype = {

                getColor: function () {

                    return this._color;

                },

                setColor: function (color) {

                    this._color = color;

                },

                toString: function () {

                    return "color: " + this.getColor();

                }

            };

 

            //Registrar la clase Tropical.            Alimentos.Frutas.Tropical.registerClass("Alimentos.Frutas.Tropical");

 

            //Enumeración.

            Alimentos.Frutas.Estado = function () { };

            Alimentos.Frutas.Estado.prototype = {

                Bien: 1,

                Mal: 2,

                Regular: 3

            };

 

            //Registrar enumeración.            Alimentos.Frutas.Estado.registerEnum("Alimentos.Frutas.Estado");

 

            //Constructor de clase Mango.

            Alimentos.Frutas.Mango = function (color, estado) {

                //En la clase hija se llama al método initializeBase.

                Alimentos.Frutas.Mango.initializeBase(this, [color]);

                this._estado = estado;

            }

 

            //Definición de clase Mango.

            Alimentos.Frutas.Mango.prototype = {

                getEstado: function () {

                    return this._estado;

                },

                setEstado: function (estado) {

                    this._estado = estado;

                },

                toString: function () {

                    //Desde una clase hija se llama a métodos de la clase base con el método callBaseMethod.

                    var text = Alimentos.Frutas.Mango.callBaseMethod(this, 'toString') + ", estado: ";

                    switch (this.getEstado()) {

                        case Alimentos.Frutas.Estado.Bien:

                            text += "bien.";

                            break;

                        case Alimentos.Frutas.Estado.Mal:

                            text += "mal.";

                            break;

                        case Alimentos.Frutas.Estado.Regular:

                            text += "regular.";

                            break;

                    }

                    return text;

                }

            }

 

            //Registrar una clase hija, especificando la clase base.

            Alimentos.Frutas.Mango.registerClass("Alimentos.Frutas.Mango", Alimentos.Frutas.Tropical);

 

            var mango = new Alimentos.Frutas.Mango("verde", Alimentos.Frutas.Estado.Regular);

            alert(mango.toString()); //color: verde, estado: regular.

 

Como vemos, ya no hay excusa para no mantener organizados nuestras clase Javascript y para hacer un buen uso de POO de Javascript en el cliente.

Un saludo!

No hay comentarios:

Publicar un comentario