¿Por qué jQuery está indefinido?

Para los desarrolladores avanzados de JavaScript (y los desarrolladores avanzados de jQuery) entre nuestros lectores, este artículo no será de mucha ayuda. En su lugar, nos centraremos en aquellos que recién están comenzando con jQuery..

Tal vez haya seguido varios tutoriales de JavaScript, haya creado varios sitios o proyectos pequeños que incorporan JavaScript en la página (o el sitio) hasta cierto punto, y ahora está listo para comenzar con un nuevo marco o biblioteca..

Si estás leyendo este tutorial, asumo que estás interesado en comenzar con jQuery. O quizás ya hayas empezado con jQuery pero te encuentras con un par de obstáculos que dificultan tu aprendizaje..

Por más frustrante que pueda ser aprender algo nuevo, golpear una barricada y luego repetirla un poco más adelante, el lado positivo es que lo más probable es que otra persona haya resuelto sus problemas..

Esto no es necesariamente cierto para aplicaciones más complejas, pero cuando estás aprendiendo algo nuevo, no eres la primera persona que rebota en la curva de aprendizaje. Con ese fin, es probable que pueda aprender algo de alguien que ha estado allí antes. 

Y eso es exactamente lo que vamos a cubrir en este tutorial. Específicamente, hablaremos sobre el problema cuando reciba el mensaje de error:

Referencia no detectada Error: jQuery no está definido

Entendiendo el problema

Antes de llegar a la solución, revisemos exactamente lo que está sucediendo. Es decir, para comprender cómo llegamos a nuestra solución, debemos comprender el problema. Solo así podremos saber cómo resolver lo que se muestra en la consola..

Si estás familiarizado con JavaScript, entonces sabes lo confuso indefinido realmente puede ser, es decir, ¿estamos hablando del objeto global o de un valor primitivo? Eso está fuera del alcance de esta publicación (¡no es un juego de palabras!), Pero incluso si no está familiarizado con ninguna de las definiciones, eso no significa que no sea capaz de diagnosticar el problema.

Configurar una caja de arena

Primero, avancemos y configuremos una página que incluya lo básico de lo que necesitamos para trabajar con la biblioteca jQuery para reproducir el error que vemos arriba..

Comience por crear el siguiente archivo HTML y guárdelo en algún lugar de su máquina local donde podrá cargarlo fácilmente en un navegador web.

             
Esta es una caja de arena HTML básica.
   

Tenga en cuenta que estamos incluyendo algunos CSS en este archivo. Es completamente opcional, aunque si quieres seguir este tutorial paso a paso, puedes descargar un archivo de todo esto desde el lado derecho de esta publicación..

Aunque el CSS es opcional, el JavaScript no lo es. Tenga en cuenta que estamos incluyendo la biblioteca jQuery de una red de entrega de contenido (o CDN) para que no tengamos que incluirla en los archivos de origen de nuestro proyecto.

A continuación, vamos a crear un archivo fuente de JavaScript que podamos usar para recrear el error anterior y escribir un código de prueba para resolver el problema. Lo llamaremos main.js.

$ (función () );

Después de eso, incluya el archivo de origen en su documento HTML para que el archivo final se vea así:

              
Esta es una caja de arena HTML básica.
   

Ahora debería poder cargar la página en su navegador y ver algo casi exactamente como la imagen de la consola compartida arriba..

Verifica que tu JavaScript esté cargado

Antes de seguir adelante, avancemos y nos aseguremos de que el archivo JavaScript esté cargado correctamente. Para hacer esto, configuraremos una alerta simple para que se muestre un mensaje cada vez que la página se carga en el navegador..

Para ver esta pantalla, realice el siguiente cambio en su archivo fuente de JavaScript:

$ (function () alert ('JavaScript Loaded!'););

A continuación, asegúrese de reordenar los archivos JavaScript desde:

A:

Hablaremos más sobre esto en un momento..

En este punto, actualice la página. Suponiendo que todo haya ido bien hasta este punto, debería ver el cuadro de diálogo como se muestra en la imagen de arriba. Si eso no funciona, revise el código que está arriba (o descargue los archivos adjuntos a este tutorial) y asegúrese de tener todo cargado correctamente..

Reproduciendo el problema

Ahora que hemos configurado la zona de pruebas para que podamos comenzar a explorar el problema en profundidad, echemos un vistazo a algunos problemas potenciales que puede ver al trabajar con jQuery.

1. jQuery se carga después de su código

Cuando opte por utilizar jQuery en un proyecto, esto significa que jQuery se convierte en una dependencia para su trabajo. Y siempre que trabaje con dependencias, generalmente debe asegurarse de que estén cargadas antes de Tu código para que tu código pueda aprovecharlo..

Si observa en el primer bit del código anterior, nuestro archivo JavaScript se carga antes de jQuery, así que cualquier cosa que nos gustaría hacer con jQuery no se puede hacer. La razón por la que estás viendo la indefinido El mensaje de error que analizamos anteriormente se debe a que jQuery no está literalmente definido dentro del contexto de su código..

Es decir, su código no tiene idea de que jQuery existe incluso porque jQuery está cargado después tu codigo. Por suerte, esta es una solución simple. Simplemente cambie el orden en que se cargan los archivos, es decir, coloque jQuery sobre su archivo fuente y luego intente ejecutar el código una vez más.

Después del cambio, el HTML completo debería verse así:

              
Esta es una caja de arena HTML básica.
   

Su código debería funcionar y la consola no debería mostrar ningún error. Este es probablemente el problema más fácil de resolver, pero es probablemente uno de los errores menos comunes, ya que generalmente se asume que jQuery tendrá que cargarse primero.

2. Un plugin o archivo en conflicto

Cuando se trabaja con jQuery, a veces a los desarrolladores les gusta modificar el PS funciona de manera que no entre en conflicto con otra cosa que utiliza su código fuente.

Específicamente, jQuery es el nombre de la función dentro del código fuente de jQuery. La biblioteca utiliza PS como un sinónimo o un atajo, ya que es probable que se use muy a menudo. Hace que el código sea más fácil de escribir y más fácil de leer.

Sin conflictos

Pero no es el único código JavaScript que usa esa función y, a veces, los desarrolladores necesitarán usar una función diferente o renunciar a PS a otro bit de código fuente. Para hacer eso, pueden terminar usando jQuery.noConflict (). 

Directamente desde la API:

Muchas bibliotecas de JavaScript utilizan PS como una función o nombre de variable, al igual que jQuery. En el caso de jQuery, PS es solo un alias para jQuery, por lo que toda la funcionalidad está disponible sin usar PS. 

Si necesita usar otra biblioteca de JavaScript junto con jQuery, devuelva el control de PS de vuelta a la otra biblioteca con una llamada a $ .noConflicto (). Antiguas referencias de PS se guardan durante la inicialización de jQuery; no conflicto() simplemente los restaura.

Asi que algun lado en el código que has incluido, existe la posibilidad de que otro desarrollador haya realizado una llamada a esta función. Por lo tanto, la PS La función no será accesible. Potencialmente podría estar llamando a una función diferente a jQuery sí, o podría estar llamando a una función que es indefinido. 

En nuestro caso, estamos interesados ​​en este último. Para abordar esto, podemos probar un par de soluciones. Primero, podemos tratar de reclamar el acceso al PS funciona simplemente llamando jQuery.noConflict () Una vez más. Aunque esto puede resolver el problema, también puede dar lugar a otro problema que existe si se incluye otro marco, biblioteca o algún otro módulo con su código.

Para ese fin, solo recomiendo usar esto cuando esté absolutamente seguro de que sabe lo que está haciendo y que no afectará a otros marcos..

Apropiadamente el alcance PS

Pero que tal si tu no hacer Sepa que no afectará a otros marcos. ¿Entonces que? En este caso, tiene la oportunidad de inicializar su código de manera que comience con el código básico. jQuery funciona y luego usa el PS para abarcar la función de acceso directo en el contexto de su propio código.

¿Suena complicado? No te preocupes No está mal. Vamos a editar nuestro archivo fuente de JavaScript para que contenga lo siguiente:

(function ($) 'use strict'; $ (function () alert ('JavaScript Loaded!'););) (jQuery); 

Bien, esto es lo que está pasando:

1. Estamos declarando una función anónima que acepta un solo argumento (en nuestro caso, jQuery).
2. La función será pasada y referenciada por PS y se incluirá solo dentro del contexto de nuestra función anónima.

Esto significa que somos libres de usar el PS La función, sin embargo, nos parece adecuada, sin interferir realmente con ninguna otra implementación de esa función particular. De hecho, para lo que vale, esta es de alguna manera la forma de facto de configurar su código basado en jQuery. 

No todo el mundo lo hace de esta manera, pero esta es una forma muy común y muy segura de manejarlo para que pueda evitar todo indefinido mensaje de error.

3. ¿Hay más?

Absolutamente. Pero el desafío es descubrir cómo cubrirlos todos. La verdad es que no sé si es realmente posible porque, en algún momento, la complejidad de los proyectos web se vuelve tan grande que rastrear dónde existe el problema puede ser difícil.

Además, cambiar jQuery para hacer lo que quieres que haga podría terminar rompiendo otra cosa (lo que obviamente nunca es bueno).

En su lugar, es mejor seguir con lo que sabemos que es seguro, como el enfoque de función anónima mencionado anteriormente, y no abusar de cosas como la no conflicto() método. Después de todo, parte del buen desarrollo no solo es jugar bien con el código de otras personas, sino también escribir código con el que otros puedan jugar bien, también.

Conclusión

Como se describió anteriormente, hay una serie de cosas diferentes que podrían desencadenar la jQuery no está definido Mensaje en tu consola. Hemos tratado de ver varios de los problemas más comunes en los ejemplos anteriores.

Dicho esto, es difícil ser exhaustivo porque es casi imposible cubrir todas las combinaciones y permutaciones que puede haber configurado en su proyecto. Tal vez esté utilizando una biblioteca conflictiva, tal vez sea un complemento mal escrito, o tal vez solo haya dependencias que no estén ordenadas adecuadamente.

Cualquiera que sea el caso, espero que esto ayude a explicar qué El problema es y algunas formas en que puede avanzar con el diagnóstico. Si su solución no se describió aquí, no dude en dejarla en los comentarios..

.