Reunion6.2011.09.08

Temas a estudiar

En esta ocasión, nos centraremos en las funciones autoejecutables y haremos nuestra primera incursión seria en el campo de los objetos Javascript.

El objetivo será allanar el terreno para comenzar a introducir patrones de diseño y las bases de una arquitectura de software moderna bajo este lenguaje.






Funciones autoejecutables
También llamadas 'Funciones mágicas' (John Resig), son una parte fundamental de la programación web más actual.

Estas funciones tienen la característica de que, una vez declaradas, se llaman así mismas pasando a estar disponbiles para otras partes de la aplicación.

Su estructura, aunque compleja a primera vista, encierra un amplio abanico de recursos que hacen posible, entre otros, que bibliotecas como jQuery funcionen correctamente.






Objetos
Junto con las funciones, los objetos en Javascript son la piedra angular para el desarrollo actual de software. La arquitectura modular propia de este paradigma, permite estructuras ordenadas y un nivel de reutilización de código difícil de conseguir con un sistema funcional.

Sin embargo, pese a lo extendido de esta metodología, Javascript posee algunas características propias, como son la ausencia de clases, que lo hacen diferente a lo que podríamos entender como un sistema de objetos tradicional.

En nuestra primera aproximación, hablaremos de cómo se estructuran los objetos, cómo declararlos, cómo acceder a sus propiedades y métodos y algunos patrones básicos para su uso correcto.






Ejercicios

ACTUALIZACIÓN: Por razones de arquitectura y solidez, he modificado la forma en que hacer la llamada a nuestros métodos. Ejm.: HelperJS.miMetodo( sujeto );


Dado que el temario para esta clase se presta a ello, trataremos de crear un pequeño framework propio con 3 ó 4 métodos útiles. En clases posteriores, podremos volver a este ejercicio para complementarlo con nuevas funcionalidades o mejorar su arquitectura incial.

1- Crear un primer esqueleto para nuestro framework a través de una función autoejecutable. Esta función, debe devolver un objeto (el framework), listo para trabajar con él. Utilizaremos la arquitectura de jQuery, por lo que un vistazo al código fuente de esta biblioteca nos puede resultar de gran ayuda.

2- El nombre de nuestro framework, será 'HelperJS', ya que contendrá algunos interesantes métodos para operar con cadenas, arrays, etc... Su uso por tanto se iniciará a través de un comando similar a:

HelperJS.miMetodo( sujeto );

3- Como HelperJS puede parecer un nombre largo, permitiremos también un álias igual que jQuery permite la conocida $. Nuestro álias será 'HJS'. Esto permitiría que el ejemplo anterior se reescribiera como:

HJS.miMetodo( sujeto );

4- Implementaremos 4 métodos, dos de los cuales ya los realizamos la semana pasada:

4.1 Un método trim (eliminar espacios en blanco del principio y final de una cadena ).

4.2 Un método toURL (sustituir los espacios en blanco interiores por guiones bajos en una cadena).

4.3 Un método camelCase (dada una cadena con espacios, unir las palabras conviritiendo en mayúsculas la primera letra).
Ejm:
var miString = 'En un lugar de la mancha';
HJS.camelCase( miString ); // EnUnLugarDeLaMancha

4.4 Un método passEncrypt. Haremos un encriptado muy básico, nada de MD5 o similares. Únicamente sustituiremos en una cadena aquellos signos alfabéticos por aquellos numéricos con los que guardan cierto parecido gráfico:
l (ele) => 1
e => 3
s => 5
b => 8
g => 9
o => 0

ACTUALIZACIÓN: Desde Twitter, @tdecs me sugiere las siguientes también las siguientes conversiones:
a => 4,
r => 2,
t => 7



Avanzar más
Para quienes quieran ir un poco más allá, podemos perfeccionar los métodos anteriores:

5. El TRIM se puede subdividir además en LTRIM y RTRIM para eliminar los espacios a izquierda o derecha de una cadena respectivamente.

6. el toURL puede comprobar si existen más de un espacio consecutivo. En ese caso, solo se aplica un guión bajo hasta la siguiente palabra.

7. Añadir comprobaciones de tipos básicas a los métodos anteriores según correspondan.











Referencias
- Funciones autoejecutables en Javascript: http://www.etnassoft....
- Objetos en Javascript: http://dev.opera.com/... (La sección El Objeto Literal es la quizá la más importante para esta clase).
- Código fuente de jQuery: http://code.jquery.co.... Interesante para la estructura del ejercicio.

Como siempre, esperamos las soluciones, dudas, etc...
Nos vemos!!





Soluciones:


Table of Contents

Page title Most recent update Last edited by
Choose From The Top Lawyers In Tampa Bay May 22, 2012 9:58 PM former member
Enlaces.reunion1.2011.11 November 3, 2011 1:33 PM Israel Alcazar R.
Charlas del grupo MadridJS November 3, 2011 1:33 PM Israel Alcazar R.
Reunion8.2011.09 October 1, 2011 4:23 PM Israel Alcazar R.
Reunion6.2011.09.08 September 8, 2011 9:58 AM Alvaro Fidalgo M.
Votación para "Yo también quiero una birra" September 2, 2011 11:04 AM Enrique Amodeo R.
Reunion5.2011.09.01 September 1, 2011 12:21 PM Óscar L.
Reuniones - Grupo de Estudio September 13, 2011 12:08 AM Israel Alcazar R.
Plantea tus dudas September 6, 2011 8:13 PM Alvaro Fidalgo M.
About MadridJS November 3, 2011 1:34 PM Israel Alcazar R.

Our Sponsors

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy