comparte el articulo 

Fundamentos de jQuery: JavaScript No Obstructivo y rutina Document Ready

Actualizado el 22/02/2011 < > 0 Comentarios

Resumen: En este artículo conoceremos lo que es el JavaScript No Obstructivo y su influencia en la correcta codificación, así como la inicialización de funciones al momento de generar el árbol DOM.

Como ya habíamos mencionado en artículos anteriores, JavaScript fue considerado por mucho tiempo un lenguaje de poca seriedad e inadecuado para llevar acabo un desarrollo complejo, el DOM e incompatibilidad con varios navegadores aunado a la mala codificación de sus usuarios llevaron a crear esta imagen que prevaleció durante gran parte de sus primeros años de existencia.

Con el desarrollo y publicación de nuevos navegadores que ofrecieron un soporte correcto a los estándares Web establecidos por la W3C, librerías como jQuery pudieron surgir y facilitar la creación de un código mejor estructurado, con ello el lenguaje empezó a ser utilizado para escribir código de funcionalidad, complejo e incluso vital para el sitio en muchas ocasiones.

JavaScript No Obstructivo

Como parte de este movimiento de estandarización surgió lo que hoy en día conocemos como JavaScript No Obstructivo, que nos inculca la buena práctica de separar el contenido (estructura) del comportamiento (funcionalidad) para poder obtener una mejor escalabilidad y evitar errores que se pueden presentar por manejo del sitio en distintos navegadores.

Con la demanda de los navegadores por obtener un código estandarizado, se ha ido aumentado la necesidad de crear métodos más robustos y complejos que se adapten a la manera no obstructiva de JavaScript, por ello el DOM ha tomado un rol fundamental para llevar acabo de manera correcta la comunicación entre la creciente capa de comportamiento con la capa de contenido.

Al adoptar el uso de JavaScript No Obstructivo en nuestro proyecto, el comportamiento deberá separarse de la estructura, por lo que a partir de ese momento la realización de operaciones sobre los elementos de la página se hará desde fuera del documento donde se crean. Para poder hacer funcionar esto, necesitamos adaptar o crear una manera de esperar a que los elementos DOM de la página sean totalmente cargados antes de proceder a ejecutar las operaciones.

Función “onload” de jQuery

El uso de la rutina “onload”, sería la manera tradicional de conseguir este resultado, dicha rutina es utilizada con el fin de llevar acabo ciertas funciones una vez que se ejecuta toda la declaración inicial de la página y que esta se encuentre totalmente cargada, para ello se utiliza una sintaxis como la siguiente:

windows.onload = function(){
	alert("El documento ha sido cargado");
}

Con la cual obtendremos una ventana de alerta que desplegará el mensaje indicado una vez que el documento sea cargado en su totalidad. Por desgracia, el navegador no solamente esperará a que el árbol DOM se cree, sino que también esperará hasta que se carguen todas los recursos, incluyendo las imágenes, y que el sitio sea mostrado en su totalidad en la ventana del navegador.

Esto puede causar que los visitantes experimenten un retraso de respuesta, que se verá reflejado por el tiempo en que tardará el script en ejecutar la sentencia “onload”, es decir, el usuario puede tener tiempo de observar e incluso interactuando con el sitio y el mensaje no aparecerá hasta que el sitio se encuentre totalmente cargado.

En el peor de los casos, alguno de los recursos puede tomar bastante tiempo de carga y esto causaría que los visitantes tengan que esperar un tiempo significante antes de que las operaciones estén disponibles, esto se puede ver reflejado en muchas ocasiones por imágenes muy grandes u hojas de estilo no comprimidas.

Función “ready” de jQuery

Una solución para esto, sería lograr un enfoque de espera que únicamente este a la expectativa de que la estructura del documento sea totalmente analizada y esperar a que el navegador convierta el código HTML en el árbol DOM necesario para poder utilizar la capa de comportamiento. El problema que se presenta es que para asegurar el buen funcionamiento de esta práctica debemos garantizar que se podrá aplicar para todos los navegadores, es ahí donde entra en acción jQuery para optimizar nuestro código.

Lograr esta operación de manera multi-navegador puede ser algo complejo con JavaScript nativo, pero jQuery proporciona una medio simple para activar la ejecución del código una vez que se ha generado el árbol DOM, sin importar si recursos como las imágenes lo han hecho. La sintaxis formal para definir dicho código es la siguiente:

jQuery(document).ready(function() {
	alert("El documento ha sido cargado");
});

Lo primero que hacemos es envolver con la función jQuery() la instancia del documento para después invocar el método “ready()”, a dicho método le pasaremos la función que queremos ejecutar una vez que el documento este listo para ser manipulado, en este caso será la función que ejecutará el mensaje de “alerta”.

Como dijimos a esta sintaxis se le da le nombre de “formal”, ya que existe otra forma de producir el mismo resultado, con la diferencia de que su sintaxis es una abreviación que consiste en utilizar únicamente la función “jQuery()” o “$()” y pasar como parámetro la función que se desea ejecutar una vez cargado el documento.

$(function() {
	alert("El documento ha sido cargado");
});

Al mandar la función como parámetro de la función “$()” indicamos al navegador que debe esperar hasta que el árbol DOM sea generado antes de ejecutar la operación indicada. Dicha técnica puede ser utilizada varias veces en un mismo código y el navegador se encargará de ejecutar cada una en el orden en que fueron especificadas, cosa contraria a la función “onload” que sólo puede ser ejecutada una vez.

Conclusión

En este artículo hemos visto una nuevo uso para la función “jQuery()” o “$()”, logramos analizar una de las tantas optimizaciones que se han alcanzado gracias al uso de jQuery y aprendimos que debemos mantener separados el contenido del comportamiento para lograr la optimización y estandarización de nuestro código, aprende bien estas reglas y respétalas lo más posible pues a lo largo de este curso las continuaremos utilizando.

Publicado el 22/02/2011, última actualización 22/02/2011.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia

Autor: Daniel Ernesto Navarro Herrera

URL: Diseño Web :: LaWebera.es

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras