JSHINT und JQUERY: '$' ist nicht definiert

StackOverflow https://stackoverflow.com/questions/8852765

Frage

Die folgenden JS:

(function() {
  "use strict";

  $("#target").click(function(){
    console.log("clicked");
  });

}());

Ausbeuten:

test.js: line 5, col 3, '$' is not defined.

Wenn mit JSHINT 0.5.5 freigegeben. Irgendwelche Ideen?

War es hilfreich?

Lösung

Wenn Sie eine relativ aktuelle Version von JSHINT verwenden, besteht der allgemein bevorzugte Ansatz darin, eine .jshintrc -Datei im Root Ihres Projekts zu erstellen und diese Konfiguration einzulegen:

{
    "globals": {
        "$": false
    }
}

Dies erklärt JSHINT, dass $ eine globale Variable ist, und das False zeigt an, dass es nicht überschrieben werden sollte.

Die .jshintrc -Datei wurde in wirklich alten Versionen von JSHINT (wie V0.5.5 wie die ursprüngliche Frage im Jahr 2012) nicht unterstützt. Wenn Sie die .jshintrc -Datei nicht verwenden möchten oder nicht möchten, können Sie diese oben in der Skriptdatei hinzufügen:

/*globals $:false */

Es gibt auch eine Abkürzung "jQuery" JSHINT -Option, wie auf dem zu sehen ist JSHINT -Optionen Seite..

Andere Tipps

Sie können Ihrem .jshintrc auch zwei Zeilen hinzufügen

  "globals": {
    "$": false,
    "jQuery": false
  }

Dies sagt JSHINT, dass es zwei globale Variablen gibt.

Alles was Sie tun müssen, ist festzulegen "jquery": true in deiner .jshintrc.

Per the JSHINT OPTIONS Referenz:

JQuery

Diese Option definiert Globale, die von der Jquery JavaScript -Bibliothek ausgesetzt sind.

Hier ist eine glückliche kleine Liste, die Sie in Ihre .jshintrc einfügen können
Ich werde diese Liste nach Zeitverlauf hinzufügen. 

{
  // other settings...
  // ENVIRONMENTS
  // "browser": true, // Is in most configs by default
  "node": true,
  // others (e.g. yui, mootools, rhino, worker, etc.)
  "globals": {
    "$":false,
    "jquery":false,
    "angular":false
    // other explicit global names to exclude
  },
}

Wenn Sie einen Intellij -Editor wie Webstorm, Pycharm, Rubymine oder Intellij IDEE verwenden:

Klicken Sie im Abschnitt "Datei-/Einstellungen/JavaScript/Codequalität Tools/JSHINT" auf das Kontrollkästchen JQuery.

Anstatt die üblichen "Ausschalten der JSHINT GLUBALS" zu empfehlen, empfehle ich die Verwendung der Verwendung der Modulmuster dieses Problem beheben. Es hält Ihren Code "enthalten" und gibt einen Leistungsschub (basierend auf Paul Irish's "10 Dinge, die ich über JQuery gelernt habe").

Ich neige dazu, meine Modulmuster wie folgt zu schreiben:

(function (window) {
    // Handle dependencies
    var angular = window.angular,
        $ = window.$,
        document = window.document;

    // Your application's code
}(window))

Sie können diese anderen Leistungsvorteile erhalten (erklärt mehr hier):

  • Beim Minimierungscode ist das übergeben window Die Objektdeklaration wird ebenfalls abgebaut. z.B window.alert() werden m.alert().
  • Code im Inneren der anonymen Funktion der sich selbst ausgeführten Funktion verwendet nur 1 Instanz der window Objekt.
  • Sie schneiden auf die Verfolgungsjagd, wenn Sie in a anrufen window Eigenschaft oder Methode, die teure Durchführung der Bereichskette z. window.alert() (schneller) versus alert() (langsamer) Leistung.
  • Lokaler Funktionen der Funktionen durch "Namespaking" und Eindämmung (Globale sind böse). Wenn Sie diesen Code in separate Skripte zerlegen müssen, können Sie für jedes dieser Skripte ein Submodul erstellen und in ein Hauptmodul importieren lassen.

Wenn Sie einen Intellij -Editor verwenden, unter

  • Einstellungen/Einstellungen
    • JavaScript
      • Codequalitätstools
        • JSHINT
          • Vordefiniert (unten) klicken Sie auf Satz

Sie können zum Beispiel alles eingeben console:false, und es wird das auch zur Liste (.jshintrc) als global hinzugefügt.

Um diesen Fehler bei der Verwendung zu beheben Die Online -JSHINT -Implementierung:

  • Klicken Sie auf "Konfigurieren" (oben in der mittleren Spalte auf der Seite).
  • Aktivieren Sie "jQuery" (unter dem Abschnitt "Annahme" unten)

Sie möchten wahrscheinlich Folgendes tun,

const $ = window.$

Um zu vermeiden, dass es einen Stiningfehler wirft.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top