JSHint i jQuery: „$” nie jest zdefiniowane

Następujący JS:

(function() {
  "use strict";

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

}());

Wydajność:

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

Po strzępieniu za pomocą JSHint 0.5.5. Jakieś pomysły?

Jeśli używasz stosunkowo najnowszej wersji JSHint, ogólnie preferowanym podejściem jest utworzenie pliku .jshintrc w katalogu głównym projektu i umieszczenie w nim tej konfiguracji:

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

To oświadcza JSHint, że $ jest zmienną globalną, a fałsz wskazuje, że nie należy jej zastępować.

Plik .jshintrc nie był obsługiwany w naprawdę starych wersjach JSHint (takich jak v0.5.5, podobnie jak oryginalne pytanie z 2012 roku). Jeśli nie możesz lub nie chcesz używać pliku .jshintrc, możesz dodać to u góry pliku skryptu:

/*globals $:false */

Istnieje również skrótowa opcja „jquery” jshint, jak widać na stronie opcji JSHint .

Możesz także dodać dwie linie do swojego .jshintrc

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

To mówi jshint, że istnieją dwie zmienne globalne.

Wszystko, co musisz zrobić, to ustawić "jquery": truew swoim .jshintrc.

Zgodnie z opisem opcji JSHint :

jquery

Ta opcja definiuje globały ujawniane przez bibliotekę JavaScript jQuery.

Oto szczęśliwa mała lista do umieszczenia w .jshintrc.
Dodam ją do tej listy w miarę upływu czasu.

{
  // 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
  },
}

Jeśli używasz edytora IntelliJ, takiego jak WebStorm, PyCharm, RubyMine lub IntelliJ IDEA:

W sekcji Środowiska pliku / ustawień / JavaScript / narzędzi jakości kodu / JSHint kliknij pole wyboru jQuery.

Zamiast zalecać zwykłe „wyłączanie globów JSHint”, zalecam użycie wzorca modułu w celu rozwiązania tego problemu. Utrzymuje twój kod „zawarty” i zwiększa wydajność (na podstawie „10 rzeczy, których dowiedziałem się o Jquery” Paula Irlanda ).

Zwykle zapisuję moje wzorce modułów w ten sposób:

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

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

Możesz uzyskać te inne korzyści związane z wydajnością (wyjaśniono więcej tutaj ):

• Podczas minimalizowania kodu przekazywana windowdeklaracja obiektowa również jest minimalizowana. np . window.alert()zostać m.alert().
• Kod wewnątrz samoczynnie wykonującej się funkcji anonimowej wykorzystuje tylko 1 instancję windowobiektu.
• Przechodzisz do sedna podczas wywoływania windowwłaściwości lub metody, zapobiegając kosztownym przechodzeniom łańcucha zasięgu, np. window.alert()(Szybszym) w porównaniu z alert()(wolniejszym) działaniem.
• Lokalny zakres funkcji poprzez „przestrzeń nazw” i przechowywanie (globale są złe). Jeśli potrzebujesz podzielić ten kod na osobne skrypty, możesz utworzyć submoduł dla każdego z tych skryptów i zaimportować je do jednego głównego modułu.

Jeśli używasz edytora IntelliJ, w sekcji

• Preferencje / ustawienia
  • JavaScript
    • Narzędzia jakości kodu
      • JSHint
        • Wstępnie zdefiniowane (na dole), kliknij Ustaw

Możesz na przykład wpisać cokolwiek, console:falsea doda to również do listy (.jshintrc) - jako globalną.

Aby naprawić ten błąd podczas korzystania z implementacji JSHint online :

• Kliknij „KONFIGURUJ” (u góry środkowej kolumny na stronie)
• Włącz „jQuery” (w sekcji „ASSUME” u dołu)

Prawdopodobnie chcesz wykonać następujące czynności,

const $ = window.$

aby uniknąć rzucania błędu kłaczkowania.