Warum ist jQuery undefiniert?

Für die fortgeschrittenen JavaScript-Entwickler (und die fortgeschrittenen jQuery-Entwickler) unter unseren Lesern ist dieser Artikel keine große Hilfe. Stattdessen werden wir uns auf diejenigen konzentrieren, die gerade mit jQuery beginnen.

Möglicherweise haben Sie mehrere JavaScript-Tutorials durchlaufen, mehrere kleine Websites oder Projekte erstellt, die bis zu einem gewissen Grad JavaScript in die Seite (oder die Website) integrieren. Jetzt können Sie mit einem neuen Framework oder einer neuen Bibliothek beginnen.

Wenn Sie dieses Tutorial lesen, nehme ich an, dass Sie an jQuery interessiert sind. Oder Sie haben bereits mit jQuery angefangen, stoßen jedoch auf einige Hürden, die Ihr Lernen behindern.

So frustrierend es auch sein kann, etwas Neues zu lernen, einen Straßensperre zu treffen und ihn dann ein wenig später wiederholen zu müssen, ist das Silberbarren, dass die Wahrscheinlichkeit besteht, dass Ihre Probleme von jemand anderem gelöst wurden.

Dies gilt nicht unbedingt für komplexere Anwendungen, aber wenn Sie etwas Neues lernen, sind Sie nicht die erste Person, die sich entlang der Lernkurve bewegt. Zu diesem Zweck können Sie wahrscheinlich etwas von jemandem lernen, der schon einmal dort war. 

Und genau das werden wir in diesem Tutorial behandeln. Insbesondere werden wir über das Problem sprechen, wenn Sie die Fehlermeldung erhalten:

Nicht abgerufener ReferenceError: jQuery ist nicht definiert

Das Problem verstehen

Bevor wir uns der Lösung nähern, lassen Sie uns genau prüfen, was passiert. Das heißt, um zu verstehen, wie wir zu unserer Lösung kommen, müssen wir das Problem verstehen. Nur dann wissen wir, wie wir lösen können, was in der Konsole angezeigt wird.

Wenn Sie mit JavaScript vertraut sind, wissen Sie, wie verwirrend es ist nicht definiert kann wirklich sein, das heißt, reden wir über das globale Objekt oder einen primitiven Wert? Das würde den Rahmen dieses Beitrags sprengen (kein Wortspiel beabsichtigt!), Aber selbst wenn Sie mit keiner der Definitionen vertraut sind, heißt das nicht, dass Sie das Problem nicht diagnostizieren können.

Richten Sie eine Sandbox ein

Lassen Sie uns zunächst eine Seite einrichten, die die Grundlagen dazu enthält, was wir benötigen, um mit der jQuery-Bibliothek zusammenzuarbeiten, um den oben gezeigten Fehler zu reproduzieren.

Erstellen Sie zunächst die folgende HTML-Datei und speichern Sie sie irgendwo auf Ihrem lokalen Computer, wo Sie sie leicht in einem Webbrowser laden können.

             
Dies ist eine einfache HTML-Sandbox.
   

Beachten Sie, dass wir in dieser Datei etwas CSS enthalten. Es ist völlig optional. Wenn Sie jedoch Schritt für Schritt mit diesem Tutorial fortfahren möchten, können Sie ein Archiv von all dem auf der rechten Seite dieses Beitrags herunterladen.

Obwohl das CSS optional ist, ist es nicht das JavaScript. Beachten Sie, dass wir die jQuery-Bibliothek aus einem Content-Delivery-Netzwerk (oder einem CDN) einschließen, damit wir sie nicht in die Quelldateien unseres Projekts einfügen müssen.

Als Nächstes erstellen wir eine JavaScript-Quelldatei, mit der wir den obigen Fehler erneut erstellen und Testcode schreiben können, um das Problem zu lösen. Wir werden es nennen main.js.

$ (Funktion () );

Fügen Sie anschließend die Quelldatei so in Ihr HTML-Dokument ein, dass die endgültige Datei folgendermaßen aussieht:

              
Dies ist eine einfache HTML-Sandbox.
   

Jetzt sollten Sie in der Lage sein, die Seite in Ihrem Browser zu laden und etwas zu sehen, das fast genauso aussieht wie das oben freigegebene Konsolenbild.

Stellen Sie sicher, dass Ihr JavaScript geladen ist

Bevor Sie fortfahren, stellen Sie sicher, dass die JavaScript-Datei korrekt geladen ist. Zu diesem Zweck richten wir eine einfache Warnmeldung ein, so dass beim Laden der Seite im Browser eine Meldung angezeigt wird.

Um diesen Bildschirm anzuzeigen, nehmen Sie folgende Änderung an Ihrer JavaScript-Quelldatei vor:

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

Stellen Sie als Nächstes sicher, dass Sie die JavaScript-Dateien erneut bestellen:

Zu:

Wir werden etwas mehr darüber sprechen.

Aktualisieren Sie an dieser Stelle die Seite. Vorausgesetzt, dass bis zu diesem Punkt alles gut gelaufen ist, sollten Sie den Dialog wie in der Abbildung oben sehen. Wenn dies nicht funktioniert, schauen Sie sich den oben stehenden Code an (oder laden Sie die an dieses Tutorial angehängten Dateien herunter) und stellen Sie sicher, dass Sie alles richtig geladen haben.

Problem reproduzieren

Nun, da wir die Sandbox so eingerichtet haben, dass wir uns eingehender mit dem Problem befassen können, wollen wir uns einige mögliche Probleme ansehen, die Sie möglicherweise bei der Arbeit mit jQuery sehen.

1. Nach dem Code wird jQuery geladen

Wenn Sie sich für die Verwendung von jQuery in einem Projekt entscheiden, bedeutet dies, dass jQuery zu einer Abhängigkeit für Ihre Arbeit wird. Wenn Sie mit Abhängigkeiten arbeiten, müssen Sie im Allgemeinen sicherstellen, dass diese geladen werden Vor Ihr Code, damit Ihr Code davon profitieren kann.

Wenn Sie im ersten Teil des obigen Codes feststellen, wird unsere JavaScript-Datei geladen Vor jQuery, also kann alles, was wir mit jQuery machen möchten, eigentlich nicht gemacht werden. Der Grund dafür, dass Sie das sehen nicht definiert Die zuvor besprochene Fehlermeldung ist, weil jQuery im Kontext Ihres Codes nicht buchstäblich definiert ist.

Ihr Code hat also keine Ahnung, dass jQuery überhaupt existiert, weil jQuery geladen ist nach dem dein Code. Zum Glück ist dies eine einfache Lösung. Ändern Sie einfach die Reihenfolge, in der die Dateien geladen werden, das heißt, platzieren Sie jQuery über Ihrer Quelldatei und versuchen Sie, den Code erneut auszuführen.

Nach der Änderung sollte der vollständige HTML-Code folgendermaßen aussehen:

              
Dies ist eine einfache HTML-Sandbox.
   

Ihr Code sollte funktionieren und die Konsole sollte keine Fehler anzeigen. Dies ist wahrscheinlich das am einfachsten zu lösende Problem, aber wahrscheinlich einer der am häufigsten auftretenden Fehler, da allgemein davon ausgegangen wird, dass jQuery zuerst geladen werden muss.

2. Ein widersprüchliches Plugin oder eine Datei

Bei der Arbeit mit jQuery ändern Entwickler manchmal die $ Funktion, damit es nicht zu einem Konflikt mit dem Quellcode kommt.

Speziell, jQuery ist der Name der Funktion innerhalb des jQuery-Quellcodes. Die Bibliothek verwendet $ als Synonym oder Abkürzung, da es wahrscheinlich so oft verwendet wird. Dadurch wird der Code einfacher zu lesen und zu lesen.

Keine Konflikte

Es ist jedoch nicht der einzige JavaScript-Code, der diese Funktion verwendet, und manchmal müssen Entwickler eine andere Funktion verwenden oder auf die Funktion verzichten $ zu einem anderen Stück Quellcode. Um dies zu tun, kann es sein, dass sie verwenden jQuery.noConflict (). 

Direkt von der API:

Viele JavaScript-Bibliotheken verwenden $ als Funktions- oder Variablenname, genau wie bei jQuery. In jQuery's Fall, $ ist nur ein Alias ​​für jQuery, So ist die gesamte Funktionalität ohne Verwendung verfügbar $. 

Wenn Sie neben jQuery eine andere JavaScript-Bibliothek verwenden müssen, geben Sie die Kontrolle von zurück $ zurück zur anderen Bibliothek mit einem Anruf an $ .noConflict (). Alte Referenzen von $ werden während der Initialisierung von jQuery gespeichert; kein Konflikt() stellt sie einfach wieder her.

So irgendwo In dem Code, den Sie eingefügt haben, besteht die Möglichkeit, dass ein anderer Entwickler diese Funktion aufgerufen hat. Und so kam es dass der $ Funktion wird nicht zugänglich sein. Es könnte möglicherweise eine andere Funktion als aufgerufen werden jQuery selbst, oder es könnte eine Funktion aufgerufen werden nicht definiert. 

In unserem Fall interessieren wir uns für Letzteres. Um dies zu beheben, können wir ein paar Lösungen ausprobieren. Erstens können wir versuchen, den Zugriff auf die $ Funktion durch einfaches Aufrufen jQuery.noConflict () Noch einmal. Dies kann zwar das Problem lösen, kann aber auch dazu führen Ein weiterer Problem, wenn ein anderes Framework, eine Bibliothek oder ein anderes Modul in Ihrem Code enthalten ist.

Zu diesem Zweck empfehle ich die Verwendung nur, wenn Sie absolut sicher sind, was Sie tun, und dass dies keine Auswirkungen auf andere Frameworks hat.

Richtiges Scoping $

Aber was ist, wenn du? nicht wissen, dass es keine Auswirkungen auf andere Frameworks hat. Was dann? In diesem Fall haben Sie die Möglichkeit, Ihren Code so zu initialisieren, dass er mit dem Basisprogramm beginnt jQuery Funktion und dann die $ um die Verknüpfungsfunktion in den Kontext Ihres eigenen Codes zu integrieren.

Ton kompliziert? Mach dir keine Sorgen. Es ist nicht schlecht. Bearbeiten Sie unsere JavaScript-Quelldatei so, dass sie Folgendes enthält:

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

Okay, hier ist was passiert:

1. Wir deklarieren eine anonyme Funktion, die ein einzelnes Argument akzeptiert (in unserem Fall), jQuery).
2. Die Funktion wird übergeben und von referenziert $ und wird nur im Rahmen unserer anonymen Funktion erfasst.

Dies bedeutet, dass wir die Nutzung der $ Funktion sehen wir jedoch als angemessen an, ohne tatsächlich andere Implementierungen dieser bestimmten Funktion zu stören. Tatsächlich ist dies die de facto Art und Weise, Ihren jQuery-basierten Code einzurichten. 

Nicht jeder tut es auf diese Weise, aber dies ist eine sehr verbreitete, sehr sichere Art, damit umzugehen, so dass Sie das Ganze vermeiden können nicht definiert Fehlermeldung.

3. Gibt es noch mehr??

Absolut. Die Herausforderung besteht jedoch darin, herauszufinden, wie sie alle abgedeckt werden können. Die Wahrheit ist, ich weiß nicht, ob dies tatsächlich möglich ist, weil die Komplexität von Webprojekten irgendwann so groß wird, dass das Auffinden der vorhandenen Probleme schwierig sein kann.

Wenn Sie jQuery so ändern, dass es das tut, was Sie möchten, kann dies zu einem Bruch führen (was offensichtlich nie eine gute Sache ist)..

Stattdessen ist es am besten, bei dem, von dem wir wissen, dass es sicher ist (wie dem oben genannten anonymen Funktionsansatz), zu bleiben und Dinge wie den kein Konflikt() Methode. Zu guter Entwicklung gehört schließlich nicht nur das gute Spiel mit dem Code anderer, sondern auch das Schreiben von Code, mit dem andere auch gut spielen können.

Fazit

Wie oben beschrieben, gibt es eine Reihe verschiedener Dinge, die das auslösen können jQuery ist nicht definiert Nachricht in Ihrer Konsole. Wir haben versucht, einige der häufigsten Probleme in den obigen Beispielen zu betrachten.

Es ist jedoch schwierig, erschöpfend zu sein, da es nahezu unmöglich ist, alle Kombinationen und Permutationen abzudecken, die Sie möglicherweise in Ihrem Projekt eingerichtet haben. Möglicherweise verwenden Sie eine in Konflikt stehende Bibliothek, es ist möglicherweise ein schlecht geschriebenes Plugin oder es gibt nur Abhängigkeiten, die nicht ordnungsgemäß angeordnet sind.

Was auch immer der Fall sein mag, das hilft hoffentlich zu erklären Was Das Problem ist und einige Möglichkeiten, wie Sie mit der Diagnose voranschreiten können. Wenn Ihre Lösung hier nicht beschrieben wurde, können Sie sie gerne in den Kommentaren hinterlassen.

.