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
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