jQuery Academy · บทเรียน

การทำงานร่วมกับไวยากรณ์ ES6+

ทำความเข้าใจวิธีเขียนโค้ด jQuery ร่วมกับฟีเจอร์ JavaScript สมัยใหม่ เช่น ฟังก์ชันลูกศร const/let และลิเทอรัลแม่แบบโดยไม่เกิดความขัดแย้ง

บทเรียน 1 จาก 311 ขั้นตอน

การทำงานร่วมกับไวยากรณ์ ES6+ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

jQuery และ JavaScript สมัยใหม่

ยินดีต้อนรับสู่บทเรียนการผสาน jQuery เข้ากับ JavaScript สมัยใหม่แบบ ES6 ขึ้นไป คุณจะได้เรียนรู้วิธีใช้จุดแข็งของทั้งสองอย่างร่วมกันเพื่อเขียนโค้ดที่สะอาด มีประสิทธิภาพ และดูแลรักษาได้ง่าย

ทำไมต้องใช้ JavaScript สมัยใหม่

ES6 ขึ้นไป (ECMAScript 2015 และรุ่นหลังจากนั้น) นำเสนอความสามารถอันทรงพลัง เช่น const, let ฟังก์ชันลูกศร และลิเทอรัลแม่แบบ

ช่วยให้โค้ดอ่านง่ายและกระชับขึ้น
นำเสนอวิธีใหม่ในการแก้ปัญหาการเขียนโปรแกรมทั่วไป
การผสานเข้ากับ jQuery ช่วยปรับปรุงกระบวนการทำงานด้านการพัฒนา

`const` และ `let` สำหรับตัวแปร

แทนที่จะใช้ var ให้ใช้ const กับตัวแปรที่ไม่ถูกกำหนดค่าใหม่ (เช่น การเลือกองค์ประกอบด้วย jQuery) และใช้ let กับตัวแปรที่อาจเปลี่ยนแปลง วิธีนี้ช่วยป้องกันการกำหนดค่าใหม่โดยไม่ตั้งใจและทำให้โค้ดชัดเจนขึ้น

ลองคลิกปุ่ม:

// Assume HTML: <div id="output"></div><button id="myBtn">Click Me</button>
const $outputDiv = $('#output');
const $myButton = $('#myBtn');

let counter = 0;

$myButton.on('click', () => {
  counter++;
  $outputDiv.text(`Button clicked ${counter} times.`);
});

ฟังก์ชันลูกศรในฟังก์ชันเรียกกลับ

ฟังก์ชันลูกศรมีรูปแบบไวยากรณ์ที่กระชับสำหรับฟังก์ชันเรียกกลับ และผูก this กับบริบทเชิงศัพท์โดยรอบให้โดยอัตโนมัติ วิธีนี้มักมีประโยชน์เมื่อคุณไม่ต้องการให้ this อ้างถึงองค์ประกอบ DOM โดยตรง

สังเกตว่าเข้าถึง appName ได้ง่ายเพียงใด:

// Assume HTML: <button id="greetBtn">Greet</button><div id="greeting"></div>
const $greetButton = $('#greetBtn');
const $greetingDiv = $('#greeting');

const appName = "CoddyKit App";

$greetButton.on('click', () => {
  // 'this' here refers to the surrounding context (window), not the button
  $greetingDiv.text(`Hello from ${appName}!`);
});

ลิเทอรัลแม่แบบสำหรับ HTML

ลิเทอรัลแม่แบบ (ที่ใช้เครื่องหมายย้อนกลับ ` `) ช่วยให้สร้างสตริงแบบไดนามิกได้ง่ายขึ้นมาก โดยเฉพาะเมื่อต้องแทรกตัวแปรหรือเนื้อหาหลายบรรทัด เมื่อเทียบกับการต่อสตริงแบบเดิม

ดูว่าการสร้าง HTML แบบไดนามิกทำได้ง่ายเพียงใด:

// Assume HTML: <ul id="items"></ul>
const $itemsList = $('#items');
const userName = "Alice";
const itemCount = 3;

const listItemHtml = `
  <li>
    <b>User:</b> ${userName}
    <br>
    Items: ${itemCount}
  </li>
`;

$itemsList.append(listItemHtml);

การแยกโครงสร้างออบเจ็กต์เหตุการณ์

เมื่อจัดการเหตุการณ์ ออบเจ็กต์เหตุการณ์จะมีคุณสมบัติมากมาย การแยกโครงสร้างของ ES6 ช่วยให้คุณดึงเฉพาะคุณสมบัติที่ต้องการได้โดยตรงในรายการพารามิเตอร์ของฟังก์ชัน ทำให้โค้ดสะอาดขึ้น

คลิกเพื่อดูรายละเอียดเหตุการณ์:

// Assume HTML: <button id="eventBtn">Log Target</button><div id="eventOutput"></div>
const $eventButton = $('#eventBtn');
const $eventOutput = $('#eventOutput');

$eventButton.on('click', ({ target, type }) => {
  // Destructured 'target' and 'type' from the event object
  $eventOutput.text(`Event: ${type}, Target ID: ${target.id}`);
});

ระมัดระวังการใช้ `this` และฟังก์ชันลูกศร

แม้ว่าฟังก์ชันลูกศรจะมีประโยชน์มาก โปรดจำไว้ว่าฟังก์ชันเหล่านี้ไม่มีบริบท this เป็นของตนเอง หากต้องการให้ this อ้างถึง องค์ประกอบ DOM ที่ทำให้เกิดเหตุการณ์ คุณยังคงต้องใช้ฟังก์ชันปกติสำหรับการเรียกกลับของ jQuery

ลองสังเกตผลลัพธ์เมื่อคลิกปุ่มต่าง ๆ:

// Assume HTML: <button class="colorBtn" id="red">Red</button><button class="colorBtn" id="blue">Blue</button><div id="log"></div>
const $colorButtons = $('.colorBtn');
const $logDiv = $('#log');

$colorButtons.on('click', function() {
  // 'this' here refers to the clicked button element
  $logDiv.text(`Clicked button with ID: ${this.id}`);
});

// An arrow function here would bind 'this' to the global window

`$.noConflict()` เพื่อให้ทำงานร่วมกันได้

หากคุณใช้ไลบรารี JavaScript อื่นที่ใช้สัญลักษณ์ $ เช่นกัน เมธอด $.noConflict() ของ jQuery จะมีความสำคัญมาก เมธอดนี้คืนตัวระบุ $ ให้กับระบบ ทำให้คุณใช้ jQuery แทนได้ และช่วยป้องกันการขัดแย้งกัน

// Assume another library uses '$'
// jQuery is loaded first
$.noConflict();

// Now, '$' is free for another library
// Use 'jQuery' for jQuery methods
jQuery(document).ready(() => {
  jQuery('#status').text('jQuery is active with noConflict!');
});
// Assume HTML: <div id="status"></div>

แนวทางปฏิบัติที่ดีในการผสานการทำงาน

ในการผสาน jQuery เข้ากับ JS สมัยใหม่อย่างมีประสิทธิภาพ:

การประกาศอย่างสม่ำเสมอ: ใช้ const และ let อย่างสม่ำเสมอ
ใช้ฟังก์ชันลูกศรให้เหมาะกับงาน: ใช้ฟังก์ชันลูกศรสำหรับการเรียกกลับในกรณีที่บริบท this ไม่ใช่องค์ประกอบ DOM
ลิเทอรัลแม่แบบ: ใช้ลิเทอรัลแม่แบบเพื่อสร้าง HTML หรือสตริงแบบไดนามิก
ห่อหุ้ม jQuery: จัดกลุ่มตรรกะเฉพาะของ jQuery และแยกออกจากฟังก์ชันอรรถประโยชน์ ES6+ ที่ไม่มีการพึ่งพา jQuery

ตรวจสอบอย่างรวดเร็ว: ES6+ และ jQuery

ฟีเจอร์ ES6+ ใดต่อไปนี้สามารถใช้ร่วมกับ jQuery ได้อย่างมีประสิทธิภาพ เพื่อเขียนโค้ดที่สะอาดและทันสมัยยิ่งขึ้น

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: ปรับ jQuery ให้ทันสมัย

คุณได้เรียนรู้วิธีผสานฟีเจอร์ ES6+ เช่น const/let ฟังก์ชันลูกศร ลิเทอรัลแม่แบบ และการแยกโครงสร้าง เข้ากับ jQuery ได้อย่างราบรื่น

แนวทางนี้ช่วยให้คุณเขียน JavaScript ที่กระชับ อ่านง่าย และดูแลรักษาได้ง่ายขึ้น พร้อมทั้งยังใช้ความสามารถอันทรงพลังของ jQuery ในการจัดการ DOM ได้ ฝึกฝนต่อไปเพื่อเชี่ยวชาญการผสานเครื่องมือเหล่านี้เข้าด้วยกัน

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 22
บทเรียน: 48

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การทำงานร่วมกับไวยากรณ์ ES6+” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทำงานร่วมกับไวยากรณ์ ES6+” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทำงานร่วมกับไวยากรณ์ ES6+”

ทำความเข้าใจวิธีเขียนโค้ด jQuery ร่วมกับฟีเจอร์ JavaScript สมัยใหม่ เช่น ฟังก์ชันลูกศร const/let และลิเทอรัลแม่แบบโดยไม่เกิดความขัดแย้ง คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การทำงานร่วมกับไวยากรณ์ ES6+” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การทำงานร่วมกับไวยากรณ์ ES6+
jQuery ในสภาพแวดล้อมแบบโมดูล
การเชื่อมต่อ jQuery กับเฟรมเวิร์กสมัยใหม่

← กลับไปที่ jQuery Academy