Pero puede ser extendido ilimitadamente a lo que necesites.

Paso 1: Crea un nuevo proyecto

Abrí Xcode e inicia un nuevo proyecto, selecciona “view based application”, dale un nombre, yo le puse “jumping”, te recomiendo ponerle igual para que no te confundas luego.

Paso 2: Importa los recursos del proyecto

Descargate este zip. Ahí vas a encontrar todos las imágenes que vamos a necesitar para este proyecto, incluyendo tres sprites de Ryu de StreetFighter que me robé encontré en PanelMonkey. Vas a necesitar copiar esas imágenes al folder de recursos del proyecto arrastrándolos del finder al panel “Groups & Files” en Xcode.

Asegurate de seleccionar “Copy items into destination group’s folder (if needed).” cuando te salga la confirnación de Xcode.

Todas las imagenes que necesitás deberían quedar copiadas ahora en el mismo folder que contiene el proyecto. Ahora para mantener el folder de recursos ordenado, agrupa todas las imagenes que acabas de importar. Para hacerlo solo seleccionalas, click izquierdo y selecciona “group” en el menú que te aparece. Podés darle un nombre a ese grupo también, yo le puse al mío el originalísimo nombre de “images”.

Compila y ejecuta la aplicación tal y como está. No deben de haber errores de compilación y el simulador solo debe mostrar una pantalla gris.

Paso 3: Modifica jumpingAppDelegate.m

En jumpingAppDelegate.m, modifica el método applicationDidFinishLaunching agregando esta línea:

// Asigna un nuevo view:  
self.viewController = [jumpingViewController alloc];  
  
[window addSubview:viewController.view]; 

 
Esto le va a asignar un nuevo view controller. Este paso es necesario porque no vas a usar Interface Builder para crear la vista por vos.

Paso 4: Modifica jumpingViewController.h

En el header del view controller (jumpingViewController.h), dentro del interface declará una nueva propiedad agregando:

UIImageView *player;

  
Luego agrega esto, antes de @end:

@property (nonatomic, retain) UIImageView *player;

Esto te permite usar “player” como un class property para una imagen:
El header debería verse algo así:

#import   
  
@interface jumpingViewController : UIViewController {  
    UIImageView *player;  
}  
  
@property (nonatomic, retain) UIImageView *player;  
  
@end  

Paso 5: Modifica jumpingViewController.m

Ahora te toca agregar los gráficos y los elementos de interfaz a esta vista
Abre el archivo jumpingViewController.m y borra todos los métodos comentados que tenga. Dejá intactos los que no están comentados.

Al inicio, después de @implementation jumpingViewController, agregá:

  @synthesize player; 

Ahora actualiza el método dealloc para que quede así:

- (void)dealloc {  
    [player release];  
    [super dealloc];  
} 

Ahora insertá este método:

- (void)addButton {  
  
    UIButton *button = [[UIButton buttonWithType:UIButtonTypeCustom]  
                                         initWithFrame:CGRectMake(240, 150, 50, 50)];  
  
    // le da una imagen al botón  
    [button setBackgroundImage:[UIImage imageNamed:@"button.png"]  
                 forState:UIControlStateNormal];  
  
    // Fija un evento  
    [button addTarget:self action:@selector(buttonPressed)  
                 forControlEvents:UIControlEventTouchUpInside];  
  
    // Agrega el boton a la vista 
    [self.view addSubview:button];  
} 

El método addButton será llamado luego para… Sí… Eso… Añadir el botón a la vista.

La primer cosa a notar es que estás creando un botón custom. Lo segundo es que buttonPressed es el nombre de un método que va a ser llamado cuando el evento touch es ejecutado.

Create un método buttonPressed temporal agregando esto:

- (void)buttonPressed {  
    NSLog(@"Botón presionado");  
}

NSLog() enviará un mensaje a la consola, que dicho sea de paso podés ver en el menú Run (cmd + shift + R).
Nuestro querido botón debe aparecer en la pantalla una vez que la vista ha cargado. Para hacer que eso pase agrega este método.

- (void)loadView {  
  
    // Asigna la vista 
    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];  
  
    // Establece el color de fondo de la vista 
    self.view.backgroundColor = [UIColor blackColor];  
  
    // Crea la imagen de fondo 
    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)];  
    [bg setImage:[UIImage imageNamed:@"bg.jpg"]];  
    [self.view addSubview:bg];  
  
    // Crea el botón  
    [self addButton];  
}  

Este método viene por defecto en los view controllers. Básicamente estás agregando una imagen de fondo y ejecutando el método addButton.

Ok. Guarda lo que has hecho, compila y ejecuta el proyecto. Deberías ver la imagen de fondo y un botón rojo. Si tenés la consola abierta debería desplegarse un mensaje de NSLog() al tocar el botón.

Paso 6: Agregando un personaje a la pantalla

Para inicializar el objeto UIImageView, añade lo siguiente en jumpingViewController.m antes del método addButton:

- (void)initPlayer {  
    self.player = [[UIImageView alloc] initWithFrame:  
                   CGRectMake(10, 100, 77.0, 94.0)];  
    [self normalStance];  
    // opaco para un mejor performance  
    self.player.opaque = YES;  
    [self.view addSubview:self.player];  
}  
- (void)normalStance {  
    [self.player setImage:[UIImage imageNamed:@"ryu.png"]];  
}  

Ese código va a inicializar el UIImageView y agregarlo a la vista principal. El método normalStance te será útil luego.

Ahora vas a enviar el initPlayer a la vista principal, para hacerlo solo modificás el método loadView así:

- (void)loadView {  
  
    // Asigna la vista 
    self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];  
  
    // Establece el color de fondo de la vista 
    self.view.backgroundColor = [UIColor blackColor];  
  
    // Crea la imagen de fondo 
    UIImageView *bg = [[UIImageView alloc] initWithFrame:CGRectMake(0 , 0, 572, 206)];  
    [bg setImage:[UIImage imageNamed:@"bg.jpg"]];  
    [self.view addSubview:bg];  
  
    // Crea el botón  
    [self addButton];  

   // Ahora inicializas el jugador  
    [self initPlayer];  
}  

Compila y ejecuta. El personaje apareció en la pantalla verdád?

Paso 7: Haciendo el personaje saltar

Ahora la parte divertida. Sobre addButton, agregá:

- (void)cleanStance {  
    [self.player setImage:nil];  
    self.player.animationImages = nil;  
}  
-(void)jumpStance {  
    [self cleanStance];  
  
    NSArray *imageArray = [[NSArray alloc] initWithObjects:  
                                                   [UIImage imageNamed:@"jump1.png"],  
                                                   [UIImage imageNamed:@"jump2.png"], nil];   
  
        self.player.animationImages = imageArray;  
        self.player.animationDuration = 0.3;  
        self.player.contentMode = UIViewContentModeBottomLeft;  
        [self.view addSubview:self.player];  
        [self.player startAnimating];  
}  

El primer método que agregaste elimina cualquier imagen asociada al objeto player. Esto te sirve para limpiar cuadros de animación que se hayan usado antes. El segundo método agrega una animación sencilla al objeto player que va a aparece mientras el objeto se mueve.

Después del método jumpStance agregá:

- (void)jump:(UIImageView *)image {  
    [self jumpStance];  
    [UIView beginAnimations:nil context:NULL];  
    [UIView setAnimationDuration: 0.3];  
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];  
    [UIView setAnimationBeginsFromCurrentState:YES];  
        image.transform = CGAffineTransformMakeTranslation(0, -40);  
    [UIView commitAnimations];  
}  

Este método es el que mueve el jugador. Primero cambia el set de imágenes y luego lo mueve 40 pixels verticalmente.

La linea:

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];  

Agrega un efecto de easing a la animación, así se ve un poco más realista, creo.

Cambiá el método buttonPressed para que quede algo así:

- (void)buttonPressed {  
    [self jump:self.player];  
}  

Compila y ejecuta otra vez. Cuando presionas el botón el personaje debe saltar, pero se va a quedar congelado en el aire al mejor estilo de matrix. Buen progreso no? Ahora dejemos que baje.

Paso 8: Terminando la animación del personaje

Antes del método jump agregá:

-(void)fall:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {  
    [self cleanStance];  
    [self normalStance];  
  
    [UIView beginAnimations:nil context:NULL];  
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];  
    [UIView setAnimationBeginsFromCurrentState:YES];  
    [UIView setAnimationDuration:0.2];  
        self.player.transform = CGAffineTransformMakeTranslation(0, 0);  
    [UIView commitAnimations];  
}  

Esto hará que el personaje regrese a un estado normal y se mueva a su posición inicial.
Ahora, cambiá el método jump para que quede así:

- (void)jump:(UIImageView *)image {  
    [self jumpStance];  
    [UIView beginAnimations:nil context:NULL];  
    [UIView setAnimationDuration: 0.3];  
    [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];  
    [UIView setAnimationBeginsFromCurrentState:YES];  
  
    // Ejecuta fall cuando la animación termine  
    [UIView setAnimationDelegate:self];  
    [UIView setAnimationDidStopSelector:@selector(fall:finished:context:)];  
    image.transform = CGAffineTransformMakeTranslation(0, -40);  
    [UIView commitAnimations];  
}  

Compila y ejecuta. Ryu debe saltar de felicidad y regresar al suelo cuando presiones el botón rojo. Es todo.

Conclusion, Conclusion, Conclusion…

Creo que con esto te queda un mejor entendimiento de algunas de las clases más usadas como UIButton, NSLog, UIImageView y cómo ejecutar animaciones. Podés usar un enfoque similar para agregar otros botones a la pantalla para ejecutar diferentes eventos u otras acciones en otros objetos.

Pues bien, el Grupo de Investigación de Tecnologías Móviles (@MovilCR en twitter) ya echa a andar sus reuniones, la primera de estas será este 16 de Junio a las 7 de la noche en el Auditorio de la Universidad Latina. En esta reunión se pretende explicar un poco el fondo y objetivos del grupo, la forma en que se trabajaría con estudiantes interesados en el área y con profesionales que ya trabajan en ella. Esta primer reunión promete bastante contenido a modo de micro charlas de 5 minutos que mostrarían a grosso modo las temáticas a abarcar en el grupo.

En fin. Si te interesa y estás en Costa Rica para la fecha, sos más que bienvenido. La información completa de la reunión la encontrás en su blog:
http://gitmocr.org/reunion/1

[UPDATE 17-06-2010]
Las fotos, vídeos y presentaciones que se hicieron ese día están disponibles acá:
http://gitmocr.org/reunion/resumen-de-la-primer-reunion

Esto es posible hacerlo utilizando una única línea de BASH, el API de Streaming de twitter y un poco de vagancia.

Usando unos cuantos comandos encadenados este bot escucha concurrencias de la palabra "bot" en la twittersfera y sigue la persona que lo escribió. Si si… totalmente inútil, pero a modo de ejemplo funciona.

Acá hay una versión con algunos espacios extra para legibilidad (el script no funciona con ese espacio):

PD: Sí, ya me dí cuenta que tiene 400 columnas.

PD2: No, no debería de usarse en producción, tan solo es un ejemplo de lo sencillo que es hacer un Bot.

PD3: Y no… esta vez no voy a hacer conclusión.

La idea con este post, es recorrer diez de las mejores caracteristicas de Firebug. Así quienes no lo usan lo conocen y quienes lo conocen de repente puedan encontrarse con algo nuevo.

1. Consola

La primer cosa que vas a ver cuando abrís firebug va a ser el panel de consola . Después de verlo un momento podrías darte cuenta que es una versión alternativa de la consola de errores de Firefox que básicamente nos sirve para:

• Registro de errores, advertencias y avisos
• Habilidad para ejecutar código JavaScript

Pero firebug lo extiende un poco más, así que en su consola podés hacer cosas mucho más complejas como:

• Registrar errores de Javascript, CSS, XML, XMLHttpRequest (AJAX) y de Chrome (no el browser… Si no de funcionalidad interna de firefox)
• Ejecutar JavaScript en la página web actual
• Usar el objeto console para hacer output desde tu scripts

    <html>
    <head>
    <script type="text/javascript">
        console.time(1);
        console.log('la seccion de scripts comenzo a ejecutarse');
        console.warn('mensaje warning');
        console.error('mensaje error');
        console.info('mensaje info');
        console.log(
        'terminando la ejecucion del script\n',
        'la ejecucion tardo:'
        );
        console.timeEnd(1);
    </script>
    </head>
    </html>

Fijate en el código arriba, tiene algunos ejemplos de uso del objeto console de firebug, imaginate que abrís que ejecutás ese HTML. Eso te va a mostrar algo como esto en la consola:

2. HTML

El segundo panel – y en el que creo que vas a pasar mucho tiempo – se divide en varias secciónes que vamos a revisar acá.

1. Este botón es equivalente al “Inspect Element” que aparece en el menú contextual. Aparte de ser muy útil para seleccionar elementos en la página, también destaca el elemento seleccionado con un borde.
2. En esta sección tenemos la jerarquía del elemento que tenemos seleccionado y la habilidad de efectuar una serie de acciones en cada uno de los componentes de la jerarquía como:
   • Copiar el inner HTML
   • Crear expresiones de XPath
   • Adjuntarle un observador de eventos (y registrarlos en la consola)
   • Borrar el elemento
   • Editar el elemento y sus nodos hijos.
   • Mover el elemento a la pestaña DOM para inspeccionarlo.
3. Es la ventana principal del panel; util para recorrer todo el html, hacer modificaciónes rápidas al código y encontrar errores (Como cerrar un div muy pronto). El menú contextual tiene las mismas opciones que la sección 2
4. En esta sección se muestran los estilos computados por el browser. La posibilidad de hacer modificaciones en tiempo real al estilo y la habilidad inspeccionar herencias me parecen que son las caracteristicas más importantes.
5. En esta sección podés examinar fácilmente el box model de un elemento: tamaño del contenido, padding, offsets, márgenes y bordes.
6. 
7. La sección DOM genera una lista con todos los métodos y propiedades del elemento seleccionado.
8. 

3. CSS

La principal diferencia entre este panel y el que está como sección dentro de la pestaña HTML es que acá podés trabajar con estilos que no han sido interpretados por el browser aún, o sea que no han sido computados. De nuevo voy a destacarte y numerar las secciones (y características esta vez).

1. Si la página en la que estás trabajando contiene múltiples hojas de estilo podés seleccionar solo la que te interese ver La región principal donde se muestra el código
2. Modifica fácilmente las propiedades del CSS.
3. Podés deshabilitar el CSS desde ahí.

4. Script

A veces, cuando escribís JavaScript tenés que ensuciarte un poco las manos. La mayor parte del tiempo te vas a ver trabajando con la consola; Pero en condiciones extremas vas a tener que pasarte al script panel. Dadas esas condiciones extremas (que ocurren comúnmente), te presento este panel, así te empezás a familiarizar con él.

1. Un Dropdown para escoger el script que querés trabajar.
2. Funciones para Debugging: continue, step in, step over y step out. Estas se habilitan solamente cuando el código en ejecución llega a un breakpoint.
3. Sección principal. Acá colocás (y quitás) los breakpoints, también sirve para inspeccionar el código Javascript.
4. Similar al panel DOM panel, la sección Watch muestra los métodos y parametros para el código que se está debuggeando.
5. Muestra el stack de funciones en tiempo real.
6. Lista los breakpoints que se encuentran activos con un link a la línea donde se encuentra. Desde acá solo podés eliminarlos.

5. DOM

Es lo mismo que HTML->DOM. Dado que nada cambia de lo que te mencioné anteriormente, pasemos a la siguiente sección.

6. Net

Curioso de cuanto tiempo tarda la página en cargar? O querés saber cual pedido tarda más tiempo en completarse? Afortunadamente, todo eso puede hacerse en el panel Net.

1. Los pedidos pueden filtrarse de acuerdo a su tipo.
2. Todo pedido es mostrado en esta sección. Al final de la lista vemos un sumario que contiene: Numero de pedidos, tamaño, cuanto fué guardado en caché y el tiempo total que tomó completarlos.
3. Revela más detalles como: HTTP headers, respuesta y cache.

Pruebas de desempeño (Performance Testing)

Quedés probar el desempeño de una función o un bucle específico? Podés usar el “timer” de Firebug.

    function medirTiempo(){
        console.time("MiTimer");
        for(x=5000; x > 0; x--){}
        console.timeEnd("MiTimer");
    }

Tres pasos. Empezá por llamar “console.time” y le pasás un único key. Luego de esto ponés el código que necesitás probar. Finalmente, llamás “console.timeEnd”, y de nuevo como único parámetro, le pasás el key que utilizaste anteriormente. Voilá.

7. Reference

Este es un panel adicional, un add-on creado por CodeBurner. Como el nombre lo indica, con este panel tenés acceso rápido a las referencias de HTML y CSS. Me parece que el panel se explica solito.

8. PixelPerfect

Si has hecho slicing de un PSD, ya sabés el tiempo que nos quita en cada elemento de la composición. Y es ahí donde PixelPerfect demuestra su poder. Este add-on te ayudará bastante en esa tediosa tarea mostrandote cómo deben ir colocados los elementos con la ayuda de imagenes superpuestas al html.

1. Con este botón podés agregar varias imágenes superpuestas para la página actual.
2. Lista de superposiciones, desde acá podés agregar o quitar las imágenes.
3. Configuración de las superposiciones.

9. YSlow

Un buen add-on creado por Yahoo!. Este te sugiere mejoras basado en una serie de test de velocidad que hace. Con YSlow, podés obtener el grado de desempeño de un website. Podés identificar fácilmente los puntos que pueden ser mejorados, además de una serie de recomendaciones para hacerlo.

Aparte de las estadisticas que te muestra YSlow, te recomiendo JSLint.com para evaluar el JavaScript y Smush.it para las imágenes.

10. FirePHP

Y por último, pero no menos importante, FirePHP. Con este add-on, podés enviar información (warnings, errors, logging, info) transparentemente a la consola desde tu código PHP. Un ejemplo sería:

            <?php
                FB::log('Log message');
                FB::info('Info message');
                FB::warn('Warn message');
                FB::error('Error message');
            ?>

Conclusión

Y dale con las conclusiones… Meh… Bueno ok… Va.

La idea con esta pequeña lista de paneles/add-on es que se te haga la vida como developer un poco más fácil — tal como me lo ha hecho a mi.

Al final, los bugs siempre pasan, lo realmente malo es no estar preparado para resolverlos.

Acá la lista de links para los add-ons:

Firebug,
CodeBurner,
PixelPerfect,
YSlow,
FirePHP

Que te sirva.

Muchas gracias a todos los que asistieron (y no se durmieron). Sí alguno tiene dudas extras o alguna sugerencia para el futuro, soy todo oidos.

También si alguien quiere mostrar esta presentación en su empresa o user group todos los contenidos son abiertos. Titanium tiene una iniciativa llamada App-U que apoya estos meet-ups enviando tshirts, stickers y otras chucherías para los asistentes así que si te interesa solo decime, no importa si no estás en Costa Rica o EEUU.

Acá dejo la presentación y los archivos de ejemplo que vimos.

Codigo de Ejemplo.

También les dejo la foto de unos amigos.

Muchos de los tips de optimización para JavaScript involucran cosas que se ven más típicamente en otros sitios, como por ejemplo minimizar la cantidad de modificaciones al DOM. Pero en este caso es un poco diferente, ya que era el script por sí mismo era quien debía correr más rápido – No trabaja con el DOM ni nada, solo procesa muchos datos.

Encontrando la raíz del problema

Antes de iniciar cualquier optimización, el código debe ser perfilado para saber qué parte es la que está corriendo despacio. La mejor herramienta para lograr esto, es definitivamente el Profiler de Firebug. Sin este probablemente hubiese tenido muchas más dificultades para encontrar problemas y probar cómo las cosas que cambiaba afectaban la velocidad.

El Profiler lo encontrás en la consola del Firebug. Solo dale clic en el botón ‘profiler’ una vez para iniciar el perfilamiento (si es que existe la palabra) y clicás de nuevo para detenerlo. Después de detenerlo vas a recibir una lista informativa de las funciones que han sido llamadas y cuanto tiempo tomó cada una en ejecutarse.

Problema 1: Iteraciones, cantidad de datos

El primer problema que me abofeteó fué la enorme cantidad de datos que se debían de guardar. Un mapa de 128×128 requiere 16,384 iteraciones para ser completamente procesado. A primer vista no parece tanto, pero solamente iterar la data, sin hacer nada más, causaba un golpe mucho mayor del que pasaría en muchos otros lenguajes. Por extraño que pueda parecer, podés usar un do-while invertido para acelerar las iteraciones, o sea en lugar de usar un ciclo con for y contar sumando, usás un ciclo con do-while y contás restando.

			var i = data.length;
			do {
			 /* algo que hacer */
			} while(--i);

Por qué es más rápido? Aparentemente el simple hecho de remover la condicion usada para comprobar cuando el loop termine hace gran parte de la diferencia. Hacer -i en vez de i- también ayuda un poco.

El problema con este enfoque es que no siempre es aplicable.

Problema 2: Llamar funciones

Fué curioso encontrar que el simple hecho de llamar una función agrega un overhead significativo. Así que llamar una función dentro de uno de esos ciclos grandes en los for puede agregar mucho tiempo de procesamiento.

Como resolverlo? Colocando el código de la función dentro del loop.

Sí, raro. Pero si mueves el código de la función y lo colocas dentro del loop en lugar de llamar la función vas a tener una mejora significativa. Tiene como gran desventaja que reduce la legibilidad del código, además de que le abre las puertas a la duplicación de código si la función se usa en más de un lugar.

Por raro que sea, esto fué uno de los propulsores más grandes de performance, que en este caso particular, era más importante que un código legible.

Problema 3: Limitaciones de la memoria

Dado al bajo monto de memoria disponible en el dispositivo al que va dirigido el juego. La aplicación se quedó sin memoria en varias ocasiones.

Primero, el tamaño del mapa era de 300×300, lo que hacía que el teléfono se quedara sin memoria casi de inmediato. Para esto no hubo más remedio que reducir el tamaño a un 128×128. Usar 300×300 pudo también tener otras repercusiones con el performance, porque la cantidad de data hubiese sido mucho mayor para dibujarlo.

Segundo, cuando implementé la funcionalidad para cargar y salvar el juego, el app de nuevo se quedaba sin memoria. Esto probablemente causado porque el data del mapa era serializado a JSON.

La idea que resolvió esto: Cortar el data en pedazitos pequeños.

Entonces, en lugar de guardar todo el array del mapa de 128×128 de una sola vez, el código lo hace en 8 partes. De este modo el tamaño del JSON serializado se mantiene pequeño y la aplicación no se queda sin memoria.

Lo mismo se hace cuando carga, Como el JSON es guardado en 8 bloques separados, al cargar se meten dentro del array uno por uno.

Más optimizaciones: Dividir y Flood numbers

Como parte de la lógica del juego también eran necesario dividir algunos numeros y asegurarme de que los valores eran números enteros.

Típicamente esto requeriría dividir primero y luego aplicar Math.floor. Como mencioné hace un rato. Llamar funciones puede salir caro.

Hay un truco ‘limpio’ para esto. Y limpio entre comillas porque para algunas personas puede ser confuso si no están familiarizadas con la sintáxis, y esto, pues hace el código un poco dificil de leer.

El truco consiste en usar un bit-shift (no conozco el término en español…):

				var foo = 10;
				//la mayoría de veces, esto es lo mismo que hacer Math.floor(foo / 4)
				var result = foo >> 2;

Hacer >> 2 es, como menciona el comentario, practicamente lo mismo que dividir por 4 y despues llamar un Math.floor. Pero en lugar de dos operaciones, tenés solamente una, por lo tanto puede ser un poco más rápido.

Si no entendés de matemática binaria los bitshifts pueden ser un poco enredados. En palabras simples, si hacés >> con 1, es lo mismo que dividir por 2, 2 es dividir entre 4, 3 es dividir entre 8, y 4 es dividir entre 16 y ahí sigue la idea…

Como es costumbre, hay un buen articulo en Wikipedia sobre esto, el cual es un buen recurso si querés leer más información al respecto.

Más?: Mete el código en funciones anónimas

Esta es una sugerencia vieja vieja vieja, pero buena buena buena… Mete el código en funciones anónimas incluso si no son o usan globales.

Por alguna razón que no podría explicar apropiadamente, esto afecta también la velocidad de ejecución de los scripts.

Así que cuando sea que tengas código en JS en un archivo, recuerda envolverla en una función anónima auto ejecutable como esta:

(function(window) {
  /* todo el código va acá!!*/
})(window);
			

También podés hacer que la función reciba el objeto window como un argumento para una posible pequeña mejora.

Por último: Reducí el scope

Esta amarra con la anterior, agregá variables locales dentro de la función anónima para funciones que se usan normalmente, como Math.round or Math.random

(function(window) {
  var round = Math.round;
  var random = Math.random;
  /* todo el código va acá!!*/
})(window);

Conclusión

Solo porque ya se me hizo costumbre hacer conclusión…. En fín. La idea detrás de todo esto es mostrar que hay formas de mejorar la velocidad del JavaScript, incluso cuando no tenga nada que ver con el DOM, pero si de igual modo trabajas con el, no está de más agregar unos tips a lo que ya conoces.

Agregando una cosa más a lo anterior. Hay una cosa más que intenté: Probar si había alguna diferencia entre llamar una función objeto vs una función instancia:

				var x = new Foo();
				x.someFunc();
				//or
				bar.someFunc();

Yo no ví diferencia alguna, pero si estás usando las clasicas intancias de POO en lugar de funciones estáticas. Puede que te sirva.

Solo recordá que debes perfilar el código siempre antes y después de una optimización. Para ver donde están las partes que realmente necesitan optimizarse y su hubieron mejoras después de algún cambio.

También considerá que muchas optimizaciones pueden hacer que el código sea dificil de mantener. Así que puedes poner en una balanza que tanto necesitas mejorar el performance. Si no es tanto, a veces es mejor no hacerlo.

Espero que te sirva de algo.

Fuente

function get_delicious()
{
	$cache = dirname(__FILE__) . '/caches/delicious';
	if(filemtime($cache) < (time() - 300))
	{
		@mkdir(dirname(__FILE__) . '/caches', 0777);
		$url = 'https://api.del.icio.us/v1/posts/recent?count=10';
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_POST, 1);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
		curl_setopt($ch, CURLOPT_TIMEOUT, 5);
		curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
		curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

		// agregá delicious.com tu usuario y password en esta línea:
		curl_setopt($ch, CURLOPT_USERPWD, 'usuario:password');
		$data = curl_exec($ch);
		curl_close($ch);
		$cachefile = fopen($cache, 'wb');
		fwrite($cachefile, $data);
		fclose($cachefile);
	}
	else
	{
		$data = file_get_contents($cache);
	}
	$xml = simplexml_load_string($data);

	$html = '
';
	foreach($xml as $item)
	{
		$html .= '
' . $item['description'] . ' ' . $item['extended'] . '

';
	}
	$html .= '
Mis bookmarks recientes

';
	$html .= '

';
	echo $html;
}

// Mostralos
get_delicious();

Este snippet usa SimpleXML, propiedad que fué incluida en PHP5 para hacer la lectura de XML mucho más sencilla.

Algo así es como podés hacerlo:

// Definimos algunas variables
var foo = "Hola";
var bar = "Mundo";
var nombre_funcion = "decir_" + foo + bar;

/*  Dado que estamos generandolo dinámicamente,
* siempre hay que asegurarse de que la función
* exista en realidad. */

if (typeof(window[nombre_funcion]) === "function")
{
	window[nombre_funcion](" Mundo!");
}
else
{
	throw("Error.  La función " + nombre_funcion + " no existe...duh!");
}

function decir_holaMundo(la_palabra)
{
	alert("Hola " + la_palabra);
}

// Browser va a alertar un trilladísimo "Hola Mundo!"

Cuando lo pensás un rato, tiene mucho sentido considerando que todos los objetos globales en JavasScript son en realidad propiedades del objeto “window”. Fijate en este ejemplo de manzanas y naranjas para entender un poco mejor el concepto.

var foo = "manzana";

function foobar()
{
	var foo = "naranja";
	alert(window["foo"]); // alerta "manzana"
	alert(foo); // alert "naranja"
	alert(window["foobar"]); // alerta la función foobar
}

foobar();

Acá hay otro ejemplo de cuando usar strings para llamar una función puede ser útil. Esta vez llamamos la propiedad de un objeto que hemos creado.

function Persona()
{
	this.mensaje = "Hola Mundo!";
	this.decir_hola = function(a)
	{
		alert(this.mensaje);
	}
}

var Yeco = new Persona();
nombre_funcion = "decir_hola";
Yeco[nombre_funcion]();

Ves como es casi lo mismo que el método de arriba usando una función global?

Espero que te sirva en algún momento.

Y bien, ya que la usamos seguido, o pensamos aprenderla, no nos queda de más conocer unos cuantos tips que nos sirvan para que funcione de un modo más adecuado.

Andando por ahí me encontré un post de Giulio Bai que aborda este tema en específico y nos dá unas buenas sugerencias al respecto:

1. $(document).ready (); Siempre

Todo lo que contenga será ejecutado tan pronto el DOM sea cargado y antes de que los contenidos sean llenados. Te permite agregar eventos a cualquier elemento en la página sin interferir directamente con el markup; todos esos metiches de onload, onclick y onLoQueSea ya no son necesarios, solo escribílos encapsulados ahí.

Un pequeño ejemplo podría ser:

$(document).ready(function()
 {
    $(".dummy").click(function()
    {
        $(this).css('color', '#000000');
    });
});

2. Usá $(window).load ()

Aunque la vasta mayoría de ejemplos vienen usando el método descrito anteriormente, a veces es mejor evitar poner todo ahí.

$(document).ready () es increíblemente útil, pero ocurre durante el rendering de la página, cuando los objetos aún se están descargando. Por eso las funcionalidades supérfluas como scrollings, arrastrar y soltar, podrían ponerse dentro de una función $(window).load () ya que esta ejecuta después de que todos los hayan sido descargados y evita que algo se rompa mientras carga la página.

La sintáxis es casi la misma que la de $(document).ready ():

$(window).load (function () {
// métodos de scrolling
});

3. Carga sólo lo que realmente necesitas

Todos han sido tentados a escribir JavaScript que va a ser usado en una sola página de un sitio y luego cargarlo por todas partes, aunque no se use. jQuery se toma el tiempo de revisar todos y cada uno de los elementos que se le dan, y eso pone las cosas un poco lentas.

Hay dos formas que se sugieren para evitar este problema. El más sencillo sería simplemente agregar una clase en el body del html que sea identificador para correr ahí solamente el código necesario.

$(document).ready(function()
 {
    if ('body').hasClass('home')
    {
        // home page code
        }
    else if ('body').hasClass('blog')
    {
        // blog code
        }
    // Y así sucesivamente
});

El otro método, un poco más enredado, sería construir una biblioteca para llamar el código que se necesite desde cada página:

var jslib =
{
    home:
    {
        init: function() {
            // home page code
            }
    },

    blog:
    {
        init: function() {
            // blog code
            }
    }

    // Y así sucesivamente
}

4. Aprende qué es el método ‘Data’ y usálo

Esto es algo muy común, la gente no piensa en ello y siempre escriben cosas como:

$('.selector').attr ('alt', 'naranja');

para guardar y asociar datos misceláneos en el DOM. Esto, es técnicamente incorrecto, además de que es fácil confundirse, sobre todo para las personas que entren al proyecto después.

jQuery ya tiene un método que sirve para guardar datos en el DOM llamado ‘data’. El ejemplo de arriba vendría siendo algo como esto:

$('.selector').data ('miColor', 'azul');
// que puede ser pedido con
$('.selector').data ('miColor');

Este método te permite asociar y guardar datos en cualquier elemento de la página y tener un nombre de referencia.

5. Usá los selectores personalizados

Estar familiarizado con los selectores de CSS es util cuando se trata de jQuery. Pero conocer los selectores que trae la biblioteca es de verdad un empujón increíble. Date una vuelta por http://docs.jquery.com/Selectors para conocer más de ellos.

Por ejemplo, podrías usar:

$("div:contains('hola')").css ('background-color', '#cc0000');

para pintar de rojo todos los div que contengan la palabra “hola” ó

$('input:password')

para obtener todos los campos que sean para password.

6. Indicadores con clases

Podés usar indicadores ó flags para monitorear lo que el usuario está haciendo o bien revisar si algo en particular se efectuó o no. El método addClass es bastante útil en este caso ya que provee una forma fácil de agregar una nueva clase css a un elemento. Así que podés chequear la existencia de la clase con la función hasClass.

Un uso muy común de los indicadores se da cuando a aplicación tiene uno o más modos de trabajo; al entrar en el segundo modo, el indicador se fija a un elemento predeterminado y, cuando se necesite, el método hasClass es usado para revisar el modo de trabajo actual. Sencillo no?

function editModeOn ()
{
// Inicializa el modo de edición y fija un indicador
$('#flags').addClass ("editModeOn");
// hacer otras cosas
}

function saveData ()
{
// guarda los datos pero primero sale del modo de edición (si está ahí)
if ($('#flags').hasClass ('editModeOn')) {
exitEditMode ();
$('#flags').removeClass ('editModeOn');
}

save ();
}

7. No llamés el mismo selector cientos de veces

De verdad, no lo hagas. Perfectamente en lugar de hacer algo como:

$('p.hola').css ('color', '#000000');
$('p.hola').text ('hoola');
$('p.hola').addClass ('parrafo');
$('p.hola').fadeTo (1000, 1);

Podés hacer algo como:

var $p = $('p.hola');
$p.css ('color', '#000000');
$p.text ('hola');
$p.addClass ('parrafo');
$p.fadeTo (1000, 1);

Eso va a mantener la información del selector lista para ser reutilizada.

8. Encadenando (Casi) todo

El encadenado, o chaining de jQuery es muy útil.
El código anterior podría ser reescrito como:

$('p.hola').css ('color', '#000000').text ('hola').addClass ('parrafo').fadeTo (1000, 1);

Eso sí, sin exagerar, es sabido que este patrón puede ser un poco lento.

9. La utilidad toggleClass

Podés encender y apagar la clase de un elemento para variar su comportamiento sin mucho esfuerzo. Digamos que tenés una clase .hidden que esconde los elementos que la usen. Fácilmente podrías mostrar los elementos de nuevo usando:

$('p.hidden').toggleClass ();

Otro punto de toggleClass es que, con el nuevo release de jQuery 1.3.3, el método .toggleClass() va a tener nuevas formas de operar. Va a ser capaz de cambiar multiples clases, además de que podrá quitar y poner todas las clases.

Estás son las formas en que vas a poder usar toggleClass:

// Con un elemento dado

	// Cambiar todas las Clases
	$('div').toggleClass(); //
	<div>
	$('div').toggleClass(); //
	<div class="a b c">
	$('div').toggleClass( false ); //
	<div>
	$('div').toggleClass( true ); //
	<div class="a b c">

	// Cambiar múltiples clases
	$('div').toggleClass( "a b" ); //
	<div class="c">
	$('div').toggleClass( "a c" ); //
	<div class="a">
	$('div').toggleClass( "a b c", false ); //
	<div>
	$('div').toggleClass( "a b c", true ); //</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

10. Guardá los resultados de jQuery

Cuando se trata de funciones, podrías querer tener algunos resultados disponibles en otros lugares. Acá hay dos posibilidades.

Una posible solución sería guardar los resultados dentro de objetos dentro de una variable global, así se pueden usar después:

// usamos el objeto Window
	window.$resultados = {
	uno : 0,
	dos : 0
	};

	// esta es la función que podria corre más de una vez
	function getResults (first, second)
	{
	$resultados.uno = first;
	$resultados.dos = second;
	}

	// corre la funcion
	getResults ($('li.azul'), $('a.rojo));
	$resultados.uno.hasClass ('azul'); // true
	$resultados.dos.hasClass ('azul'); // false

	// corre de nuevo
	getResults ($('li.rojo'), $('a.azul));
	$resultados.uno.hasClass ('azul'); // false
	$resultados.dos.hasClass ('azul'); // true

La otra, y a mi parecer la mejor, como se recomienda en el punto 4 es usar el método Data en lugar de crear una variable global.

$.data(window, "resultados", { uno: false, dos: true });

//Para accesar los valores:

$.data(window, "resultados").uno; // false
$.data(window, "resultados").dos; // true

// Y para cambiarlos:

$.data(window, "resultados").uno = true;
$.data(window, "resultados").dos = false;

El gran poder de los objetos es que los datos y las funciones que hacen algo pueden estar encapsuladas en un mismo objeto. Así que aprovechandonos de ello y para seguir buenas prácticas, a veces metemos todas las utilidades necesarias al “desnudo” en el namespace global. Algo así:

function getElementsByClassName(cssClassName) {...}

Aunque en esto veo dos problemas:

• Uno pequeño: el nombre de la función es extremadamente largo… que feo
• y uno grande: si estás trabajando con alguna librería, es muy probable que colisione con otra función con un nombre similar y que se comporte diferente

Vamos a arreglarlos

Podemos crear una clase de utilidades que nos sirva para encapsular esta función (y otras) más o menos así:

function DomUtilityBag() {
this.getByClass= function(cssClassName) {...}
}

e instanciarla:

var domUtils = new DomUtilityBag();

Si has usado constructores, parece obvio y familar no?. Pero los constructores fueron hechos para permitir instanciar cualquier número de objetos del mismo prototype. Por qué necesitaríamos hacer eso con un conjunto de utilidades misceláneas? Usualmente no hay razón, porque no hay datos que se diferencien de una instancia a otra.

Acá entra Singleton y es donde JSON se vuelve muy útil. Con él podemos declarar una única instancia y todos sus miembros de una sola llamada, sin meternos con los constructores:

var domUtils = {
getByClass: function(cssClassName) {...}
}

haciendolo aún mejor

Mientras estamos haciendo el domUtils asumamos que esa librería de utilidades podría crecer bastante (siempre lo hacen). Así que vamos a seguir la técnica de YUI para el namespacing, categorizando más las utilidades, y como solo necesitamos una copia, utilizamos JSON para hacerlo. Acá está el esqueleto de mi librería, y le vamos a poner… eeehh, hmm… ZAQ, sí ZAQ:

var ZAQ = {}  //esto crea un objeto namespace vacío

ZAQ.util = {} //un sub-objeto para el paquete de utilidades

//lo granulamos más, con utilidades específicas para el DOM
ZAQ.util.dom = {
getByClass: function(cssClassName) {...},
elemHasClass: function(elem, className) {...}
}

//podemos agregar más tipos de utilidades en sus propias "categorias"
ZAQ.util.array = {
contains: function(theArray, match) {...}
}
ZAQ.util.string = {
startsWith: function(theString, match) {...},
endsWith:   function(theString, match) {...}
}

Y así sucesivamente.

Conclusión?

Necesitamos una?

Ok, ok… El fín es que podés usar el poderoso patrón singleton en JavaScript, funciona perfecto para este tipo de librerías de utilidades y un sin fín de cosas más en las que solo necesités una copia corriendo. Mantiene el código fácil de leer, mantiene el namespace intacto y ordenado y además previene colisiones con otras funciones cuando estás integrando otras librerías.

Que te sirva de algo.