Archivo de octubre de 2012

Namespaces en JavaScript

Publicado por Iván Gajate el 30 de octubre de 2012 en JavaScript | 1 comentario »

Como ya vimos cuando explicamos los patrones de diseño, todas las variables que creemos fuera de una función van al ámbito global (root en Flash).

Para evitar que nuestras clases entren en conflicto con otras con el mismo nombre podemos crear un objeto donde meteremos todas nuestras clases, un Namespace.

var YXQN = YXQN || {};

Esto viene a decir: “La variable YXQN es igual a YXQN si existe, y si no, creo un objeto vacío”

Con esto nos aseguramos que solo exista una sola vez para todo nuestro proyecto. Yo lo suelo guardar en un archivo independiente que importo en el html desde el principio.

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

Ahora nuestras clases las definiremos dentro de nuestro namespace:

YXQN.Cuadrado = function(){
	...
};

Y para crear un nuevo objeto:

var miCuadrado = new YXQN.Cuadrado();

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

Estudio de Paisajismo

Publicado por Iván Gajate el 15 de octubre de 2012 en Portfolio | Los comentarios están cerrados.

Galería de los trabajos del paisajista Mirágoli.
Diseño claro y sencillo que no distrae la atención de lo verdaderamente importante, la imágen.
Diseños específicos para cada dispositivo, iPad y tablets, así como móviles en formato apaisado o retrato, imágenes optimizadas para cada dispositivo y así mejorar la experiencia de usuario.
HTML y JavaScript, W3C validate.

Galería de imágenes:

Estudio de paisajismo