JSHint และ jQuery: '$' ไม่ได้ถูกกำหนดไว้

JS ต่อไปนี้:

(function() {
  "use strict";

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

}());

อัตราผลตอบแทน:

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

เมื่อขุยโดยใช้ JSHint 0.5.5 ความคิดใด ๆ

หากคุณกำลังใช้ JSHint เวอร์ชันล่าสุดแนวทางที่ต้องการโดยทั่วไปคือการสร้างไฟล์. jshintrc ในรูทโครงการของคุณและกำหนดค่านี้ไว้:

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

สิ่งนี้ประกาศให้ JSHint ทราบว่า $ เป็นตัวแปรทั่วโลกและเท็จระบุว่าไม่ควรเขียนทับ

ไฟล์. jshintrc ไม่ได้รับการสนับสนุนใน JSHint เวอร์ชันเก่าจริง ๆ (เช่น v0.5.5 เช่นคำถามเดิมในปี 2012) หากคุณไม่สามารถหรือไม่ต้องการใช้ไฟล์. jshintrc คุณสามารถเพิ่มไฟล์นี้ที่ด้านบนของไฟล์สคริปต์:

/*globals $:false */

นอกจากนี้ยังมีตัวเลือก jshint "jquery" แบบย่อตามที่เห็นในหน้าตัวเลือก JSHint ..

คุณยังสามารถเพิ่มสองบรรทัดใน. jshintrc ของคุณ

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

สิ่งนี้บอก jshint ว่ามีตัวแปรโกลบอลสองตัว

ทั้งหมดที่คุณต้องทำคือการตั้งในของคุณ"jquery": true.jshintrc

ตามการอ้างอิงตัวเลือก JSHint :

jQuery

ตัวเลือกนี้กำหนด globals ที่เปิดเผยโดยไลบรารี jQuery JavaScript

นี่คือรายการเล็ก ๆ ที่มีความสุขที่จะใส่ใน. jshintrc ของคุณ
ฉันจะเพิ่มในรายการนี้เมื่อเวลาผ่านไป

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

หากคุณใช้โปรแกรมแก้ไข IntelliJ เช่น WebStorm, PyCharm, RubyMine หรือ IntelliJ IDEA:

ในส่วนสภาพแวดล้อมของเครื่องมือ / ไฟล์ / การตั้งค่า / JavaScript / รหัสคุณภาพ / JSHint คลิกที่ช่องทำเครื่องหมาย jQuery

แทนที่จะแนะนำ "ปิดปกติ JSHint globals" ฉันขอแนะนำให้ใช้รูปแบบโมดูลเพื่อแก้ไขปัญหานี้ มันทำให้รหัสของคุณ "มี" และให้เพิ่มประสิทธิภาพ (ขึ้นอยู่กับพอลไอริช"10 สิ่งที่ผมได้เรียนรู้เกี่ยวกับ Jquery" )

ฉันมักจะเขียนรูปแบบโมดูลของฉันเช่นนี้

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

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

คุณสามารถรับประโยชน์ด้านประสิทธิภาพอื่น ๆ (อธิบายเพิ่มเติมที่นี่ ):

• เมื่อลดขนาดโค้ดการwindowประกาศในวัตถุจะลดขนาดลงเช่นกัน เช่นกลายเป็นwindow.alert()m.alert()
• รหัสภายในฟังก์ชั่นที่ไม่ระบุชื่อที่ดำเนินการเองใช้เพียง 1 อินสแตนซ์ของwindowวัตถุ
• คุณตัดไปที่การไล่ล่าเมื่อมีการโทรในwindowคุณสมบัติหรือวิธีการป้องกันการข้ามผ่านราคาแพงของห่วงโซ่ขอบเขตเช่นประสิทธิภาพwindow.alert()(เร็วกว่า) เมื่อเทียบกับalert()(ช้ากว่า)
• ขอบเขตของฟังก์ชั่นในท้องถิ่นผ่าน "namespacing" และการบรรจุ (กลมเป็นสิ่งที่ชั่วร้าย) หากคุณต้องการแยกรหัสนี้เป็นสคริปต์แยกคุณสามารถสร้าง submodule สำหรับแต่ละสคริปต์เหล่านั้นและนำเข้ามาไว้ในโมดูลหลักเดียว

หากคุณกำลังใช้เครื่องมือแก้ไข IntelliJ ภายใต้

• การตั้งค่า / การตั้งค่า
  • จาวาสคริ
    • เครื่องมือคุณภาพรหัส
      • JSHint
        • กำหนดไว้ล่วงหน้า (ที่ด้านล่าง) คลิกตั้ง

ตัวอย่างเช่นคุณสามารถพิมพ์อะไรก็ได้console:falseและมันจะเพิ่มสิ่งนั้นลงในรายการ (.jshintrc) เช่นเดียวกับทั่วโลก

ในการแก้ไขข้อผิดพลาดนี้เมื่อใช้งาน JSHint ออนไลน์ :

• คลิก "กำหนดค่า" (ด้านบนของคอลัมน์กลางของหน้า)
• เปิดใช้งาน "jQuery" (ใต้ส่วน "ASSUME" ที่ด้านล่าง)

คุณอาจต้องการทำสิ่งต่อไปนี้

const $ = window.$

เพื่อหลีกเลี่ยงการโยนข้อผิดพลาดที่เป็นขุย