Patrones con javascript

26 oct 2012 by shadow_of__soul, No Comments »
javascript o'reilly books

asusta no? :P

Reconozco que hasta hace un tiempo, patrones y javascript no era algo que crei que podian ir de la mano, pero viendo que mi codigo sinceramente se convertia en algo inmantenible, busque opciones que me permitiera escribir algo mas entendible a largo plazo. Por eso hoy dia les traigo las descripciones de los diferentes patrones que se usan en javascript, aplicables tanto en el navegador como en su contrapartida de servidor (usando node.js).

Pero como siempre, vamos a lo basico primero:

Que son los patrones?

Patrones o mejor dicho, patrones de diseño en programacion, se le llama a formas especificas de escribir codigo, para que este sea lo suficientemente versatil para ser re-utilizado en otras partes del desarrollo. En programacion es muy comun encontrar casos donde un mismo codigo es necesario que sea ejecutado varias veces, o con alguna minima modificacion es un sus propiedades. Para el ahorro de tiempo y el evitar la multiplicacion de codigo, entran los patrones de diseño en juego, para hacerle la vida mas facil al programador.

Patrones y javascript

No creo que javascript sea un lenguaje complicado, pero como sucede con php, la libertad que da en los 2 casos y el no llevar a una organizacion correcta del codigo, lleva a que a largo plazo, una base de codigo sea insostenible.

Programacion funcional en un lenguaje puramente de objetos

La manera mas comun que vemos de programar en javascript, es la orientado a la creacion de funciones, como el siguiente ejemplo:

1
2
3
4
funciton Alerta(){
alert("Mostrando un alerta");
}
Alerta();

Esta es la formas mas simple que tiene javascript de escribir codigo, creando funciones individuales en el ambito global de la aplicacion y llamandolas a voluntad, logramos la ejecucion del codigo y el resultado deseado. Aunque no esta mal, ya que es la forma mas primitiva del lenguaje, cuando tenemos que realizar cientos de cambios y tenemos cientos de lineas de codigo (o miles) se vuelve engorroso encontrar las llamadas y mantener una persistencia de datos que no moleste a presentes o futuros desarrollos o pedazos de codigo.

Singleton

Un patron interesante, es el singleton, que consiste basicamente en crear un objeto, y asignarle a sus propiedades, diferentes valores (que pueden ser simplemente datos en variables como tambien funciones), un ejemplo de singleton puede ser el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
var ejemploDeSingleton = {
propiedadA : "Hello",
propiedadB : "World",

init : function(){
/* Referenciamos en self al objeto actual */
var self = this;
alert(self.propiedadA+" "+self.propiedadB);
}
};

ejemploDeSingleton.init();

Como dijimos anteriormente, creamos un objeto, le asignamos diferentes propiedades y funciones, y podemos usar las propiedades creadas para nuestras necesidades.

Module Pattern (Patron de modulo)

Derivado del singleton, llegamos a lo que Douglas Crockford llamo “Module Pattern” la idea es encapsular un bloque de codigo, que no interfiera con modulos creados por otros. De esta manera, tambien permite la declaracion de propiedad, y metodos publicos y privados. El patron de modulo empieza declarando una funcion de auto-instanciacion de la siguiente manera:

1
var funcionAutoInstanciable = function () {}();

Como dijimos anteriormente, este patron nos permite declarar propiedades publicas y privadas. Como lo dice la palabra, las propiedades publicas van a poder ser accedidas desde afuera del objeto en si mismo, no asi las privadas. Para esto, las propiedades publicas deben ser definidas en el objeto que retorna la misma funcion, de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var patronModulo = function() {
/*  Propiedades y funciones privadas */
propiedadPrivadaA = {"texto1":"Hello","texto2":"World"};
funcionPrivadaA = function(obj){
return obj.texto1+" "+obj.texto2;
}

/* Propiedades y funciones publicas */

return {
init: function(){
/* llama y utiliza funciones de indole privada en la funcion publica */
alert(functionPrivadaA(propiedadPrivadaA));
}
};

}();
patronModulo.init();

Revealing Module Pattern

Como una evolucion del Module Pattern, nace el siguiente patron, que es practicamente lo mismo que el anterior, pero pretende solucionar problemas inherentes del mismo en cuanto a la flexibilidad y colaboracion de la escritura de codigo, ya que para la declaracion de propiedades publicas, lo que hace, es referenciarlas a sus pares privadas. Pueden verlo en el siguiente ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var patronModulo = function() {
/*  Propiedades y funciones privadas */
propiedadPrivadaA = {"texto1":"Hello","texto2":"World"};
funcionPrivadaA = function(obj){
return obj.texto1+" "+obj.texto2;
}

funcionQueSeraPublica = function(){
alert(functionPrivadaA(propiedadPrivadaA));
}

/* Propiedades y funciones publicas */
return {
init: funcionQueSeraPublica
};
}();

patronModulo.init();
 Objetos Personalizados
En un lenguaje orientado a objetos, estos son instanciados. Javascript no es un lenguaje orientado a objetos sino basado en objetos, por lo tanto, es necesario llamar a una funcion contructora para poder instanciar un objeto. Los objetos personalizados pretende emular algo que en lenguajes orientados a objetos como java, se llama poliformismo. Usando la propiedad especial “prototype” podemos hacer que todas las instancias de un objeto tengan la misma propiedad, desde su creacion, como lo pueden ver en el siguiente ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
var customObj = function(){</div>
this.init();
};
customObj.prototype.valor1 = 0;
customObj.prototype.init = function(){
this.valor1 = Math.random();
alert(this.valor1);
};
/* cada una de estas instancias, le va a dar un valor diferente a la propiedad valor1 de su instancia. */

new customObj();
new customObj();
new customObj();
Y asi es como hemos cubierto los patrones mas conocidos y utiles del mundo javascript. Te invito a que te animes a probarlos, y si tenes alguna duda o te gustaria discutir algo, pasate por el foro que lo charlamos :)

Etiquetas: , ,

Sigueme !

Follow Me! Follow Me! Follow Me!