Introducción a jQuery (Parte 3) Esperando que la página se cargue y funciones anónimas

Podría decirse que jQuery es una habilidad esencial para el desarrollador web moderno Qué Lenguaje de Programación para Aprender - Programación Web Qué Lenguaje de Programación para Aprender - Programación Web Hoy vamos a echar un vistazo a los distintos lenguajes de programación web que impulsan Internet. Esta es la cuarta parte en una serie de programación para principiantes. En la parte 1, aprendimos lo básico de ... Leer más, y en esta pequeña miniserie, espero poder brindarte el conocimiento para comenzar a utilizarlo en tus propios proyectos web. En la primera parte de nuestro tutorial de jQuery Tutorial de jQuery - Introducción: Conceptos básicos y selectores Tutorial de jQuery - Introducción: Fundamentos y selectores La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos las manos con algo de código y aprendamos cómo ... Leer más, analizamos algunos aspectos fundamentales del idioma y cómo utilizar los selectores; en la parte 2, pasamos a los métodos de manipulación de DOM Introducción a jQuery (Parte 2): Métodos y funciones Introducción a jQuery (Parte 2): Métodos y funciones Esto es parte de una introducción para principiantes a la serie de programación web jQuery . La Parte 1 cubrió los conceptos básicos de jQuery de cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Leer más .

En la parte 3, abordaremos el problema de cómo retrasar jQuery hasta que la página se haya cargado, luego intentaré explicar qué son las funciones anónimas y por qué necesita saberlas..

Carga demorada: cómo y por qué?

Si ha estado probando parte del código de las partes 1 y 2, es posible que haya encontrado algunos errores, un comportamiento extraño o cosas que simplemente no funcionan. El error más común que experimenté al aprender jQuery fue el hecho de que no se encontraron elementos de DOM, aunque pude verlos claramente en la fuente de la página, ¡jQuery me dijo que simplemente no podía encontrarlos! Porqué es eso?

Bueno, todo tiene que ver con el orden en el que el navegador carga las cosas. En su forma más simple, si tiene un script jQuery ejecutándose en el navegador antes de el elemento DOM que está buscando realmente se ha creado, el script se cargará primero, pero no hará nada porque no puede encontrar el elemento, luego el elemento DOM se cargará más tarde. Esto es un problema menor si coloca todos sus scripts cerca del pie de página, pero aún puede suceder.

La solución es envolver sus scripts en lo que se llama un evento listo para documentar. Esto hace que el código adjunto espere hasta que el DOM se haya cargado completamente (hasta que sea Listo). Usarlo es simple:

$ (document) .ready (function () // su código para retrasar va aquí);

Hay una forma aún más breve de hacerlo resumida en la documentación de jQuery, pero le sugiero encarecidamente que utilice esta forma para la legibilidad del código..

Este evento preparado para documentos es otro buen ejemplo de función anónima, así que vamos a tratar de entender lo que esto significa.

Funciones anonimas

Si, como yo, tienes algo de experiencia en programación para principiantes, la idea de funciones anonimas - lo que es fundamental para jQuery y Javascript, puede ser un poco desconcertante. Por un lado, comete errores debidos a llaves que no coinciden, por lo que lo explicaré ahora. Si desea una explicación detallada de por qué las funciones anónimas son mejores que las funciones con nombre normales en un nivel más técnico, le sugiero que lea esta entrada de blog bastante compleja [Ya no está disponible].

Hasta ahora, probablemente solo has encontrado funciones nombradas. Estas son funciones que se han declarado con un nombre y, por lo tanto, se pueden llamar a cualquier otro lugar, tantas veces como desee. Considere este ejemplo trivial, que registrará un mensaje en la consola cuando se cargue la página.

function doStuffOnPageLoad () console.log ("haciendo cosas!");  $ (documento) .ready (doStuffOnPageLoad);

Esto es útil si su función está diseñada para ser reutilizada, pero en este caso es bastante complicada ya que solo queremos que se active una vez cuando se carga la página. En su lugar, no nos molestamos en definir una función separada, y simplemente la declaramos en línea como un parámetro cuando sea necesario. El ejemplo anterior, por lo tanto, sería mejor reescrito como:

$ (document) .ready (function () console.log ("hacer cosas"););

Es posible que no veas muchas ventajas de esto en este momento (en este caso es solo un poco menos de código), pero a medida que tus scripts progresen en complejidad, apreciarás no tener que saltar para intentar encontrar definiciones de funciones. Desafortunadamente, hace que las cosas sean un poco más difíciles para los principiantes, solo mire todas esas llaves, así que asegúrese de revisar los siguientes puntos si está recibiendo errores:

• Número correcto de llaves correspondientes: el sangrado de su código ayuda.
• Tirantes rizados vs redondos.
• Declaración de cierre con un punto y coma, pero no es necesario después de cerrar una llave.

Uso de un editor de código como Sublime Text 2 Pruebe Sublime Text 2 para sus necesidades de edición de código multiplataforma Pruebe Sublime Text 2 para sus necesidades de edición de código multiplataforma Sublime Text 2 es un editor de código multiplataforma del que solo he oído hablar recientemente. Y tengo que decir que estoy realmente impresionado a pesar de la etiqueta beta. Puede descargar la aplicación completa sin pagar un centavo ... Leer más realmente puede ayudar, ya que resalta las llaves correspondientes y automáticamente sangra el código para usted. Un editor de código dedicado es esencial, realmente.

Eso es todo para esta lección, pero debe acostumbrarse a incluir algunas manipulaciones básicas del DOM en el evento de preparación de documentos antes de continuar, y comenzar a editar archivos en un editor de código si aún no lo ha hecho. La próxima vez, analizaremos los eventos y cómo se utilizan para agregar interactividad a una página, como hacer que jQuery haga algo cuando se hace clic en un botón. Preguntas o comentarios siempre bienvenidos a continuación.

Explore más sobre: ​​JavaScript, jQuery, Programación, Desarrollo Web.