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

Anuncio publicitario

jQuery es posiblemente una habilidad esencial para los desarrollador web Qué lenguaje de programación aprender: programación webHoy vamos a echar un vistazo a los distintos lenguajes de programación web que impulsan Internet. Esta es la cuarta parte de una serie de programación para principiantes. En la parte 1, aprendimos lo básico de ... Lee mas , y en esta pequeña miniserie espero darte los conocimientos para que empieces a utilizarlo en tus propios proyectos web. En el primera parte de nuestro tutorial de jQuery Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa semana pasada, hablé sobre lo importante que es 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 un código y aprendamos cómo ... Lee mas , analizamos algunos fundamentos del lenguaje y cómo usar los selectores; en la parte 2, pasamos a métodos de manipulación del DOM Introducción a jQuery (Parte 2): métodos y funciones

Esto es parte de una introducción continua para principiantes a la serie de programación web jQuery. La parte 1 cubrió los conceptos básicos de jQuery sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con ... Lee mas .

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

Carga retrasada: ¿cómo y por qué?

Si ha estado probando parte del código de la parte 1 y 2, es posible que haya encontrado algunos errores, comportamientos extraños o cosas que simplemente no funcionan. El error más común que experimenté al aprender jQuery fue que los elementos DOM no se encontraban, incluso aunque podía verlos claramente en la fuente de la página, jQuery seguía diciéndome que simplemente no podía encontrar ¡ellos! ¿Porqué es eso?

Bueno, todo tiene que ver con el orden en 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 se ha creado realmente, la secuencia de comandos 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 evento listo para documentos. Esto hace que el código adjunto espere hasta que el DOM se haya cargado por completo (hasta que esté Listo). Usarlo es simple:

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

Hay una forma aún más breve de hacer esto que se describe en el documentación de jQuery, pero le sugiero encarecidamente que utilice esta forma para mejorar la legibilidad del código.

Este evento de preparación de documentos es otro buen ejemplo de función anónima, intentemos comprender qué significa esto.

Funciones anónimas

Si, como yo, tienes algo de experiencia en programación de nivel principiante en tu haber, la idea de funciones anónimas, Que es fundamental para jQuery y Javascript, puede ser un poco desconcertante. Por un lado, comete errores debido a brackets no coincidentes bastante comunes, razón por la cual lo voy a explicar ahora. Si desea una explicación detallada de por qué las funciones anónimas son mejores que las normales con nombre funciones en un nivel más técnico, sugiero leer esta publicación de blog bastante compleja [Ya no Disponible].

Hasta ahora, probablemente solo te hayas encontrado funciones nombradas. Estas son funciones que se han declarado con un nombre y, por lo tanto, se pueden llamar en 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 un poco complicado ya que solo queremos que se active una vez cuando se carga la página. En cambio, no nos molestamos en definir una función separada y simplemente la declaramos en línea como un parámetro cuando sea necesario. Por lo tanto, sería mejor reescribir el ejemplo anterior como:

$ (documento) .ready (function () { console.log ("haciendo cosas"); });

Es posible que no vea muchas ventajas de esto en este momento, es solo un poco menos de código en este caso, pero como sus scripts progresan en complejidad, apreciará no tener que saltar tratando de encontrar la función definiciones. Desafortunadamente, hace las cosas un poco más difíciles para los principiantes, solo mire todos esos frenos, así que asegúrese de verificar los siguientes puntos si está recibiendo errores:

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

Usando un editor de código como Texto sublime 2 Pruebe Sublime Text 2 para sus necesidades de edición de código multiplataformaSublime Text 2 es un editor de código multiplataforma del que escuché recientemente, y debo decir que estoy realmente impresionado a pesar de la etiqueta beta. Puede descargar la aplicación completa sin pagar un centavo ... Lee mas realmente puede ayudar, ya que resalta las llaves correspondientes y sangra automáticamente el código para usted. Un editor de código dedicado es esencial, de verdad.

Eso es todo para esta lección, pero debería acostumbrarse a incluir algunas manipulaciones DOM básicas en el evento de documento listo antes de continuar, y comience a editar archivos en un editor de código si no está ya. La próxima vez, veremos los eventos y cómo se usan para agregar interactividad a una página, como hacer que jQuery haga algo cuando se hace clic en un botón. Las preguntas o comentarios siempre son bienvenidos a continuación.