“Cosas que hubiese querido saber de jQuery”

Nota: este post no es una traducción, pero se basa en un artículo que se publicó cuando yo trabajaba en algo similar.

Para quién no sepa aún qué es jQuery o qué hace, por favor leer los dos artículos anteriores publicados en este blog en la sección programación.

Es común que al aprender y utilizar una nueva herramienta, nos demos cuenta de errores que cometemos en el proceso de aprendizaje. muchas veces esto se amplifica en el ámbito de la programación, dado los estilos y paradigmas que el programador ya tiene en su mente al enfrentar una nueva herramienta que necesite de nuevos paradigmas.
Los puntos declarados a continuación, son algunos aspectos que hubiese querido saber al comenzar a utilizar jQuery. Algunos de ellos hbiesen ahorrado varias horas de investigación y trabajo.

Punto de partida común: Objetos y métodos

jQuery es un herramienta desarrollada en javascript. A su vez, javascript tiene una aproximación a la metodología de orientación a objetos.
Aunque no fue mi caso, mucha gente pretende utilizar jQuery sin conocer la orientación a objetos. Por favor visite wikipedia en el lenguaje que mejor conozca y busque información acerca de lo que significa Orientación al Objeto (OO), es decir, Hágalo Usted Mismo.

Si no, vale decir que un método es una función que pertenece a un objeto. Y qué es un objeto? Un objeto es una abstracción tal cual la conocemos en la vida real, pero llevada a la programación. Supongamos que vamos a tener un objeto llamado auto, y que el objeto auto tiene ruedas y motor y una función encender motor (encenderMotor). Este objeto puede ser escrito en javascript como:

auto= function(){

	var this.ruedas = 4;
	var this.motor = false;

	var encenderMotor=function(){
		this.motor=true;
	};
}

Donde, para encender basta con ejecutar el método auto.encenderMotor() quien cambiará el valor de la variable motor a true.

Este concepto de objeto, compuesto por variables y métodos, es una de las bases de jQuery y de los plug-ins.

Chainability

Javascript, por lo tanto jQuery también, permite encadenar el llamado de métodos. Por ejemplo, si se tiene este código jQuery:

var testText = $(‘div#test’).parent().text();

y además se tiene el siguiente código html:

<div id=“test”>This is the content!</div>

Al ejecutar el código jQuery, este retornará primero al elemento padre del div con id=test y luego retornará el texto de dicho elemento. Es decir, la variable testText contendrá un String que en algún lugar contendrá “This is the content!”.

Cabe señalar que no todo es encadenable. Ejemplo de esto es invertir la llamada de .parent() y de text(). Si se ejecuta primero la función text(), está retornará un String, y el objeto String no tiene una función parent(), por lo que se generará un error.

jQuery siempre devuelve un arreglo

Este principio es uno de los más importantes de jQuery. La ejecución de un selector de jQuery, siempre retorna un arreglo, incluso si el selector no hace match, en cuyo caso retorna un arreglo vacío. Para un ejemplo mirar esto:

<div id="wrapper"> 
 <div>Content #1!</div> 
 <div>Content #2!</div>
 <div>Content #3!</div>
 <div>Content #4!</div>
 </div> 
<div id="wrapper2">
 <div class="box">Content2 #1!</div>
</div> 
*/ 
// returns 4 
$('#wrapper .box').length; 
// num is equal to 4 
var num = $('#wrapper .box'); 
num = num.length; 
// text is equal to 'Content #2!' 
var text = $("#wrapper .box")[1]; 
// text is equal to 'Content #1' 
var text = $("#wrapper .box")[0]; 
// text is equal to 'Content2 #1' 
var text = $("#wrapper2 .box")[0];

jQuery en una variable

A veces es necesario contener la respuesta de un selector de jQuery en una variable para no volver a realizar la búsqueda y ahorrar tiempo. Para esto basta con guardar el objeto(arreglo) retornado. Ejemplo de esto:

var testBox = $('#test');

// the variable testHTML is equal to the content's of '#test'

var testHTML = testBox.html();

Que significa callback?

Un callback es una función o el nombre de una función que se ejecuta una vez terminada la función que originalmente fue llamada.

Ejemplo de esto:

function makeAlert () {

 $(this).html('Ran this function!');

}

// both lines do the same thing

$('#test').slideUp(400, makeAlert);

Donde este código busca cambiar el contenido del div cuyo id es igual a “test” con el mensaje “Ran this function!” una vez realizado el slideUp del div. Cabe señalar que this es el elemento DOM que retorna el selector de jQuery. El siguiente código hace algo similar pero con una función anónima:

$('#test').slideUp(400, function () {

 $(this).html('Ran the anonymous function!');

});

No puedo ver los elementos de un iFrame/Frame

Un problema común al utilizar jQuery es la imposibilidad con algunos browsers para poder “ver” con los selctores, los elementos de un frame o iframe, esto, porque usualmente en toda la documentación se utiliza la función

$(document).ready(function(){ /* aqui va tu codigo*/ });

para disparar lo que deseamos hacer con jQuery.
Consejo, intentalo con
$(window).ready(function(){ /* aqui va tu codigo*/ });

que va a esperar que la ventana este completamente lista para ejecutar el código de nuestro interés.

Finalmente: los selectores

Un punto importante a considerar cuando se utiliza jQuery es el uso de los selectores, si bien, funcionan, no todos lo hacen en el mismo tiempo.
Es recomendable realizar siempre la busqueda :

1. por id, ej: $(”#miDiv”), si esto no es posible,
2. intentar búsquedas por elementos del DOM, ej: $(”div input”)
3. Y si no hay ninguna otra posibilidad, selecionar por clases (CSS), ej: $(”.myClass”).

Esto se debe a que la busqueda por Id aprovecha la función de javascript getElementById, que es sumamente eficiente.
LA razón por la cual la tercera opción es más lenta, es decir, en el caso de la búsqueda tipo $(”.myClass”), es porque jQuery debe recorrer todo el DOM, y por cada elemento del DOM verificar que dicho elemento tenga la clase “myClass” en su atributo “Class”.