Entradas con la etiqueta ‘clase’

JS – Métodos Estáticos en JavaScript

Publicado por Iván Gajate el 26 de octubre de 2014 en JavaScript | Los comentarios están cerrados.

A veces podemos necesitar que una clase que instanciemos muchas veces guarde alguna variable o método a nivel de clase, no a nivel de instancia (variables estáticas).
Podemos usar las clausuras para ello:

http://jsfiddle.net/yporqueno/h1n2gk2d/

var Persona = function (){
    // Variable de clase (estatica)
    var count = 0;
 
    // Constructor de la clase Persona
    var fn = function(){
        var _api = {};
        _api.saluda = function(){
            alert('Hola #'+count);
        };
        count++;
        return _api;
    };
 
    // Metodo estatico de Persona
    fn.getCount = function(){
        alert('Numero de personas '+count);
    }
 
    return fn;
}();

De esta manera la variable “count” solo se crea una vez, y queda accesible para cada instancia que creemos de la clase Persona.
Ahora podemos crear tantas instancias como queramos de Persona y acceder al conteo que lleva la clase de forma centralizada.

var manolo = new Persona();
manolo.saluda();
 
var pepe = new Persona();
pepe.saluda();
 
// Metodo estatico de la clase Persona
Persona.getCount();

Gracias Javi por la idea!! 🙂

AS3 – Tipo de clase de un objeto

Publicado por Iván Gajate el 24 de noviembre de 2012 en AS3, Flash | 1 comentario »

A veces necesitamos saber que clase de objeto tenemos en el escenario, por ejemplo para recorrerlos todos y si son de tipo TextField hacer algo.

Para eso podemos acceder a través de esta función:

 

function getClass(obj:Object):Class {
	return Class(getDefinitionByName(getQualifiedClassName(obj)));
}
import es.yporqueno.utils.ObjectUtils;
 
var miObjeto:MovieClip = new MovieClip();
 
trace(es.yporqueno.utils.ObjectUtils.getClass(miObjeto));    // [class MovieClip]

Este tipo de funciones las voy a ir recopilando en una clase ObjectUtils.

Descargar ObjectUtils.as

Descargar todo el paquete es.yporqueno

Programación Orientada a Objetos en JavaScript

Publicado por Iván Gajate el 25 de octubre de 2012 en Desarrollo Web, JavaScript | 3 comentarios »

Para poder hacer una programación orientada a objetos en JavaScript primero tenemos que entender que TODO lo que declaremos se guarda en el espacio global, es como si en Flash lo guardásemos todo el en root (!!).
Por eso para evitar problemas vamos a meter nuestro código dentro de una función, como si fuese una clase de ActionScript (al ser una función no se ejecutará hasta que la llamemos por primera vez).
Además, podemos guardar esta “clase” en una variable y de esta manera instanciarla tantas veces como queramos:

var Cuadrado = function(){
	alert("Soy un cuadrado!!");
};
 
var unCuadrado = new Cuadrado();
var otroCuadrado = new Cuadrado();
var untercerCuadrado = new Cuadrado();

 

Todas las variables que declaremos dentro de esa función no entrará en conflicto con ninguna variable de fuera, y a su vez, desde fuera se podrá preguntar por las variables de dentro:

var unNumero = 0;
 
var Cuadrado = function(){
	this.unNumero = 5;
	var otraVariable = "Foo";
};
 
var unCuadrado = new Cuadrado();
 
alert(unNumero); // 0
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

En este ejemplo “declaramos” la variable unNumero en “this“, que hace referencia al propio objeto creado. De hecho, ese this es lo que devuelve la función cuando hacemos un new Cuadrado() y lo que se almacena en la variable unCuadrado.
Todo lo que no esté declarado en this se ejecuta dentro de la función pero no es accesible desde fuera como en el caso de otraVariable.

Sin embargo, podemos devolver cualquier cosa, por ejemplo un objeto creado por nosotros:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero = 5;
 
	var otraVariable = "Foo";
 
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
alert(unCuadrado.otraVariable); // undefined

Hemos creado un objeto vacío llamado _api que devuelve la función, y con él todas las variables (y métodos) que hayamos declarado dentro. El resto de variables siguen teniendo como ámbito nuestro nuevo objeto pero no son accesibles desde fuera de este.
¡Ya tenemos métodos públicos y privados! 🙂
En efecto, con este sistema es fácil encapsular nuestros métodos privados para hacer mas robusta nuestra clase, y solo dejar visible ciertos métodos públicos que queramos (de ahí el nombre de la variable 🙂

Solo nos queda un detalle: debido a la “peculiar” manera en que se generan los objetos en JavaScript (magia dice Isra 😉 es mas que aconsejable utilizar un método init declarado al principio de nuestra clase y llamado justo antes del final. De esta manera nos aseguramos que cuando accedemos al objeto éste está perfectamente montado y podemos acceder a sus variables y métodos sin problemas.
Quedaría tal que así:

var Cuadrado = function(){
	var _api = {};
	_api.unNumero;
 
	function init(){
		_api.unNumero = 5;
	}
 
	// Este metodo es publico
	_api.metodoPublico = function(){
		alert("Soy un Cuadrado!");
	}
 
	// Metodo privado, solo accesible desde dentro del objeto
	function metodoPrivado(){
		//
	}
 
	init();
	return _api;
};
 
var unCuadrado = new Cuadrado();
 
alert(unCuadrado.unNumero); // 5
unCuadrado.metodoPublico(); // Soy un Cuadrado!

Esto (menos las tres ultimas lineas) lo guadamos en un archivo independiente llamado Cuadrado.js, lo importamos en nuestro html con la etiqueta script

<script type="text/javascript" src="js/Cuadrado.js"></script>

y ya tenemos nuestra estructura de clases lista para darle caña! 🙂

PD: Mi agradecimiento a Isra y Javi que han tenido la paciencia de enseñarme esta forma de trabajar que tanto me reconforta… 😉

Eclipse, atajo para abrir clases

Publicado por Iván Gajate el 22 de septiembre de 2011 en Desarrollo Web, eclipse | 15 comentarios »

Menudo atajo de teclado majo que me han dicho hoy. Abre una ventana para comenzar a escribir el nombre de la clase que queremos buscar (Open Type). Por ejemplo, si queremos abrir la clase “Modelo.as” basta con pulsar

Cmd+Shift+T (Mac)

Ctrl+Shift+T (PC)

y comenzar a escribir “mo” y Enter. Ya. 🙂

busca por el nombre la clase que queremos abrir

Y aquí otros atajos interesantes 😉

http://www.rossenstoyanchev.org/write/prog/eclipse/eclipse3.html

AS3 – xml.getElementsByClass

Publicado por Iván Gajate el 28 de abril de 2010 en AS3, Flash, Tutoriales | 1 comentario »

Y la compañera de getElementsByName y getElementById es esta.

Supongamos que tenemos un xml con varios nodos con la misma definición de clase:

<div>
	<p class="parrafo">
		Esto es un párrafo
	</p>
	<form>
		<input type="checkbox" id="chk0">Leer</input> <br />
		<input type="checkbox" id="chk1">Montar en bici</input> <br />
		<input type="checkbox" id="chk2">Dormir</input> <br />
	</form>
	<p class="parrafo">
		Esto es otro párrafo diferente, pero con la misma clase
	</p>
</div>

Y queremos recuperarlos en forma de XMLList:

function getElementsByClass(data:XML, className:String):XMLList{
	return data.descendants().(hasOwnProperty("@class") && attribute("class")==className);
}

// Se usaria asi:
getElementsByClass(miXml, "parrafo");

Y devolvería esto:

<p class="parrafo">Esto es un párrafo</p>
<p class="parrafo">Esto es otro párrafo diferente, pero con la misma clase</p>

Este tipo de funciones las voy a ir recopilando en una clase XmlUtils.

Descargar XmlUtils.as

Descargar todo el paquete es.yporqueno

Crear Dinámicamente Instancias de Clase en AS3

Publicado por Iván Gajate el 7 de junio de 2009 en AS3, Flash | 19 comentarios »

Normalmente creamos una instancia de una clase con un simple

var cuadrado:Cuadrado = new Cuadrado();

Y eso está muy bien cuando conocemos el tipo de objeto que queremos crear, en este caso un Cuadrado.

Pero cuando no lo conocemos porque es variable, por ejemplo porque depende de una elección del usuario, tenemos que hacerlo así:

import flash.utils.getDefinitionByName;

var nombreClase:String = "es.yporqueno.Cuadrado";
var miClase:Class = Class(getDefinitionByName(nombreClase));
var instancia:* = new miClase();

addChild(instancia);

 

Leer el resto de esta entrada