Share
Pour les développeurs JavaScript avancés (et les développeurs jQuery avancés) de notre lectorat, cet article ne sera pas d'une grande aide. Au lieu de cela, nous allons nous concentrer sur ceux qui débutent avec jQuery.
Peut-être avez-vous déjà parcouru plusieurs didacticiels sur JavaScript, construit plusieurs petits sites ou projets intégrant dans une certaine mesure JavaScript dans la page (ou le site), et vous êtes maintenant prêt à utiliser un nouveau framework ou une nouvelle bibliothèque.
Si vous lisez ce didacticiel, alors je suppose que vous êtes intéressé par une mise en route de jQuery. Ou peut-être que vous avez déjà commencé avec jQuery mais que vous rencontrez quelques obstacles qui entravent votre apprentissage.
Aussi frustrant que cela puisse être d’apprendre quelque chose de nouveau, d’atteindre un obstacle puis de le répéter un peu plus loin dans l’aventure, le bon côté des choses est qu’il est fort probable que vos problèmes aient été résolus par quelqu'un d'autre..
Ce n'est pas nécessairement vrai pour les applications plus complexes, mais lorsque vous apprenez quelque chose de nouveau, vous n'êtes pas la première personne à rebondir sur la courbe d'apprentissage. À cette fin, vous êtes probablement en mesure d’apprendre quelque chose de quelqu'un qui y était déjà venu..
Et c'est exactement ce que nous allons couvrir dans ce tutoriel. Plus précisément, nous allons parler du problème lorsque vous recevez le message d'erreur:
Uncaught ReferenceError: jQuery n'est pas défini
Avant d’arriver à la solution, examinons exactement ce qui se passe. Autrement dit, pour comprendre comment nous arrivons à notre solution, nous devons comprendre le problème. Ce n'est qu'alors que nous pourrons savoir comment résoudre ce qui est affiché dans la console..
Si vous connaissez JavaScript, alors vous savez à quel point indéfini peut vraiment être, c'est-à-dire, parlons-nous de l'objet global ou d'une valeur primitive? Cela dépasse le cadre de cet article (sans jeu de mots!), Mais même si vous ne connaissez pas l'une ou l'autre définition, cela ne signifie pas que vous ne pouvez pas diagnostiquer le problème..
Commençons par créer une page contenant les bases de ce dont nous avons besoin pour utiliser la bibliothèque jQuery afin de reproduire l’erreur indiquée ci-dessus..
Commencez par créer le fichier HTML suivant et enregistrez-le quelque part sur votre ordinateur local où vous pourrez le charger facilement dans un navigateur Web..
Ceci est un sandbox HTML de base.
Notez que nous incluons des CSS dans ce fichier. C'est totalement facultatif, mais si vous souhaitez suivre pas à pas ce tutoriel, vous pouvez télécharger une archive de tout cela à partir du côté droit de ce message..
Bien que le CSS soit facultatif, le JavaScript ne l’est pas. Notez que nous incluons la bibliothèque jQuery à partir d'un réseau de distribution de contenu (ou d'un CDN) afin de ne pas l'inclure dans les fichiers source de notre projet..
Ensuite, créons un fichier source JavaScript que nous pouvons utiliser pour recréer l'erreur ci-dessus et écrire du code de test afin de résoudre le problème. Nous l'appellerons main.js.
$ (fonction () );
Après cela, incluez le fichier source dans votre document HTML pour que le fichier final ressemble à ceci:
Ceci est un sandbox HTML de base.
Maintenant, vous devriez pouvoir charger la page dans votre navigateur et voir quelque chose qui ressemble presque à l'image de la console partagée ci-dessus.
Avant d'aller plus loin, allons de l'avant et assurez-vous que le fichier JavaScript est chargé correctement. Pour ce faire, nous allons configurer une alerte simple afin qu'un message s'affiche chaque fois que la page est chargée dans le navigateur..
Pour voir cet écran, apportez les modifications suivantes à votre fichier source JavaScript:
Accentsconagua
$ (function () alert ('JavaScript Loaded!'););Ensuite, assurez-vous de commander à nouveau les fichiers JavaScript à partir de:
À:
Nous en reparlerons un peu plus à ce sujet.
À ce stade, actualisez la page. En supposant que tout se soit bien passé jusqu'à ce point, vous devriez voir la boîte de dialogue illustrée dans l'image ci-dessus. Si cela ne fonctionne pas, examinez le code ci-dessus (ou téléchargez les fichiers joints à ce didacticiel) et assurez-vous que tout est chargé correctement..
Maintenant que le bac à sable est configuré pour que nous puissions commencer à explorer le problème en profondeur, examinons quelques problèmes potentiels que vous pouvez rencontrer lorsque vous utilisez jQuery..
Chaque fois que vous choisissez d'utiliser jQuery dans un projet, cela signifie que jQuery devient une dépendance pour votre travail. Et chaque fois que vous travaillez avec des dépendances, vous devez généralement vous assurer qu'elles sont chargées. avant votre code pour que votre code puisse en tirer parti.
Si vous remarquez dans la première partie du code ci-dessus, notre fichier JavaScript est chargé. avant jQuery, donc tout ce que nous aimerions faire avec jQuery ne peut pas être fait. La raison pour laquelle vous voyez la indéfini Le message d'erreur dont nous avons parlé plus tôt est que jQuery n'est littéralement pas défini dans le contexte de votre code.
C'est-à-dire que votre code n'a aucune idée que jQuery existe même parce que jQuery est chargé après votre code. Heureusement, c'est une solution simple. Modifiez simplement l’ordre dans lequel les fichiers sont chargés - c’est-à-dire, placez jQuery au-dessus de votre fichier source, puis essayez à nouveau d’exécuter le code..
Après le changement, le code HTML complet devrait ressembler à ceci:
Ceci est un sandbox HTML de base.
Votre code devrait fonctionner et la console ne devrait afficher aucune erreur. C’est probablement le problème le plus facile à résoudre, mais c’est probablement l’une des erreurs les moins fréquentes, car il est généralement supposé que jQuery devra être chargé en premier.
En travaillant avec jQuery, les développeurs aiment parfois modifier le $ fonctionner de sorte qu'il ne soit pas en conflit avec quelque chose d'autre que leur code source utilise.
Plus précisément, jQuery est le nom de la fonction dans le code source de jQuery. La bibliothèque utilise $ comme un synonyme ou un raccourci, car il sera probablement utilisé si souvent. Cela rend le code plus facile à taper et à lire.
Mais ce n'est pas le seul code JavaScript qui utilise cette fonction et parfois les développeurs devront utiliser une autre fonction ou abandonner la $ à un autre bit de code source. Pour ce faire, ils peuvent finir par utiliser jQuery.noConflict ().
Directement de l'API:
De nombreuses bibliothèques JavaScript utilisent$comme un nom de fonction ou de variable, tout comme jQuery. Dans le cas de jQuery,$est juste un alias pourjQuery, donc toutes les fonctionnalités sont disponibles sans utiliser$.
Si vous devez utiliser une autre bibliothèque JavaScript à côté de jQuery, restaurez le contrôle de$retour à l'autre bibliothèque avec un appel à$ .noConflict (). Anciennes références de$sont sauvegardés lors de l'initialisation de jQuery;pas de conflit()les restaure simplement.
Alors quelque part Dans le code que vous avez inclus, il est possible qu'un autre développeur ait appelé cette fonction. Ainsi, le $ la fonction ne sera pas accessible. Il pourrait potentiellement appeler une fonction autre que jQuery lui-même, ou il pourrait appeler une fonction qui est indéfini.
Dans notre cas, nous nous intéressons à ce dernier. Pour résoudre ce problème, nous pouvons essayer plusieurs solutions. Premièrement, nous pouvons essayer de récupérer l’accès au $ fonctionner en appelant simplement jQuery.noConflict () encore une fois. Bien que cela puisse résoudre le problème, il peut également en résulter un autre problème qui existe si un autre cadre, une bibliothèque ou un autre module est inclus avec votre code.
À cette fin, je vous recommande de ne l'utiliser que lorsque vous êtes absolument certain de savoir ce que vous faites et que cela n'affectera pas les autres cadres..
$ Mais si vous ne pas sachez que cela n'affectera pas les autres cadres. Quoi alors? Dans ce cas, vous avez la possibilité d’initialiser votre code pour qu’il commence par le code de base. jQuery fonction et ensuite utiliser le $ pour définir la fonction de raccourci dans le contexte de votre propre code.
Cela vous semble compliqué? Ne t'inquiète pas. Ce n'est pas mauvais. Modifions notre fichier source JavaScript pour contenir les éléments suivants:
(function ($) 'use strict'; $ (function () alert ('JavaScript Loaded!'););) (jQuery); Bon, voici ce qui se passe:
jQuery).$ et sera portée seulement dans le contexte de notre fonction anonyme.Cela signifie que nous sommes libres d'utiliser le $ fonction que nous jugeons appropriée, sans interférer avec aucune autre implémentation de cette fonction particulière. En fait, pour ce que cela vaut, c'est en quelque sorte la manière de facto de configurer votre code jQuery.
ne pas toutes les personnes le fait de cette façon, mais c’est un moyen très courant et très sûr de le gérer afin d’éviter tout indéfini Message d'erreur.
Absolument. Mais le défi consiste à trouver comment les couvrir tous. La vérité est que je ne sais pas si c'est réellement possible car, à un moment donné, la complexité des projets Web devient si grande qu'il peut être difficile de déterminer où se trouve le problème..
De plus, changer jQuery pour faire ce que vous voulez faire peut casser quelque chose d’autre (ce qui n’est évidemment pas une bonne chose).
Au lieu de cela, il est préférable de rester avec ce que nous savons être sûr, comme l'approche de la fonction anonyme mentionnée ci-dessus, et de ne pas abuser de choses comme le pas de conflit() méthode. Après tout, une bonne partie du développement consiste non seulement à bien jouer avec le code d’autres personnes, mais aussi à écrire du code avec lequel d’autres peuvent jouer bien..
Comme indiqué ci-dessus, un certain nombre de facteurs différents pourraient déclencher la jQuery n'est pas défini message dans votre console. Nous avons tenté d'examiner plusieurs des problèmes les plus courants dans les exemples ci-dessus..
Cela dit, il est difficile d’être exhaustif, car il est presque impossible de couvrir toutes les combinaisons et permutations que vous avez peut-être définies dans votre projet. Vous utilisez peut-être une bibliothèque en conflit, peut-être un plugin mal écrit, ou peut-être y a-t-il juste des dépendances mal ordonnées.
Quoi qu’il en soit, cela aide, espérons-le, à expliquer quoi le problème est et certaines manières que vous pouvez avancer pour le diagnostiquer. Si votre solution n'a pas été décrite ici, n'hésitez pas à la laisser dans les commentaires..
.
