JavaScript Academy · บทเรียน

การกำหนดองค์ประกอบกำหนดเอง

ลงทะเบียนองค์ประกอบด้วย API ของ customElements

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

องค์ประกอบกำหนดเองคืออะไร

องค์ประกอบกำหนดเองช่วยให้คุณกำหนดแท็ก HTML ของตนเองที่ทำงานร่วมกับคลาส JavaScript ได้ แทนที่จะต่อโค้ด div ที่ยุ่งเหยิงเข้าด้วยกัน คุณสามารถสร้างคอมโพเนนต์ที่นำกลับมาใช้ได้และทำงานได้ในตัวเอง เช่น <user-card>

องค์ประกอบเหล่านี้เป็นส่วนหนึ่งของมาตรฐาน คอมโพเนนต์เว็บ
ทำงานได้โดยตรงในเบราว์เซอร์ โดยไม่ต้องใช้เฟรมเวิร์ก
ชื่อองค์ประกอบกำหนดเองต้องมียัติภังค์ เช่น my-button

รีจิสทรี customElements

เบราว์เซอร์เปิดให้ใช้รีจิสทรีส่วนกลางที่ window.customElements คุณลงทะเบียนแท็กใหม่โดยเรียกใช้ customElements.define(name, constructor)

เมื่อกำหนดแล้ว แท็กทุกแท็กในเอกสารที่ตรงกันจะถูกอัปเกรดเป็นอินสแตนซ์ของคลาสของคุณ

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

การขยาย HTMLElement

องค์ประกอบกำหนดเองคือคลาสที่ extends HTMLElement คลาสพื้นฐานนี้มอบความสามารถมาตรฐานทั้งหมดของ DOM ให้แก่องค์ประกอบของคุณ เช่น แอตทริบิวต์ เหตุการณ์ และการจัดรูปแบบ

เรียก super() เป็นสิ่งแรกในตัวสร้างเสมอ เพื่อให้องค์ประกอบได้รับการเริ่มต้นอย่างถูกต้อง

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

การแสดงเนื้อหา

ภายในองค์ประกอบ คุณสามารถกำหนดค่าให้กับ this.innerHTML หรือใช้เมธอดของ DOM เพื่อสร้างเนื้อหา รูปแบบที่พบบ่อยคือแสดงผลเมื่อองค์ประกอบเชื่อมต่อกับหน้าเว็บ

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

การใช้องค์ประกอบใน HTML

หลังจากลงทะเบียนแล้ว ให้ใช้แท็กของคุณเหมือนกับองค์ประกอบที่มีอยู่ในระบบ คุณสามารถวางแท็กโดยตรงในมาร์กอัปหรือสร้างด้วย document.createElement

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

กฎของตัวสร้าง

ตัวสร้างจะทำงานเมื่อมีการสร้างอินสแตนซ์ มีกฎที่เคร่งครัดดังนี้

เรียก super() เป็นสิ่งแรก
ห้ามตรวจสอบหรือเพิ่มแอตทริบิวต์/องค์ประกอบลูกที่นี่
เลื่อนงาน DOM ไปทำใน connectedCallback

ใช้ตัวสร้างเฉพาะสำหรับกำหนดสถานะเริ่มต้นและตั้งค่าตัวรับฟังเหตุการณ์เท่านั้น

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

การเพิ่มพฤติกรรม

เนื่องจากองค์ประกอบของคุณเป็นโหนด DOM จริง คุณจึงสามารถเพิ่มตัวรับฟังเหตุการณ์และอัปเดตเนื้อหาเพื่อตอบสนองต่อการโต้ตอบได้

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

ข้อกำหนดเรื่องเครื่องหมายขีดกลาง

ชื่อองค์ประกอบกำหนดเองต้องมีเครื่องหมายขีดกลาง เพื่อรับประกันว่าจะไม่ชนกับองค์ประกอบ HTML ในตัวที่มีอยู่ในปัจจุบันหรืออาจมีในอนาคต

my-widget ใช้ได้
mywidget ใช้ไม่ได้และทำให้เกิดข้อผิดพลาด
ชื่อไม่แยกตัวพิมพ์ใหญ่เล็ก แต่เขียนด้วยตัวพิมพ์เล็ก

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined และ get

เมธอดรีจิสทรีที่มีประโยชน์สองรายการมีดังนี้

customElements.get(name) ส่งคืนตัวสร้าง หรือส่งคืน undefined หากยังไม่ได้ลงทะเบียน
customElements.whenDefined(name) ส่งคืน Promise ที่ทำงานสำเร็จเมื่อองค์ประกอบถูกกำหนดแล้ว

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

การกำหนดเพียงครั้งเดียว

แต่ละชื่อสามารถลงทะเบียนได้เพียงครั้งเดียว การเรียก define ด้วยชื่อที่ใช้ไปแล้วจะทำให้เกิดข้อผิดพลาด ดังนั้นควรป้องกันการลงทะเบียนซ้ำในโมดูลที่ใช้ร่วมกัน

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

เหตุใดองค์ประกอบกำหนดเองจึงสำคัญ

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

ทำให้การนำคอมโพเนนต์กลับมาใช้ใหม่เป็นมาตรฐานในเทคโนโลยีทุกชุด
ทำงานร่วมกับวงจรชีวิตของเบราว์เซอร์ได้โดยตรง
ทำงานคู่กับ DOM เงาและเทมเพลตได้อย่างเป็นธรรมชาติ ซึ่งจะกล่าวถึงในภายหลัง

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับการกำหนดองค์ประกอบกำหนดเอง

ทบทวน

คุณได้เรียนรู้วิธีกำหนดองค์ประกอบกำหนดเองดังนี้

customElements.define(name, class) ลงทะเบียนแท็ก
คลาส extends HTMLElement และเรียก super() เป็นอันดับแรก
ชื่อต้องมีเครื่องหมายขีดกลาง
เรียก render เนื้อหาใน connectedCallback ไม่ใช่ในตัวสร้าง
get และ whenDefined ช่วยตรวจสอบสถานะการลงทะเบียน

ถัดไป เราจะสำรวจวงจรชีวิตทั้งหมดขององค์ประกอบกำหนดเอง

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

บทเรียน “การกำหนดองค์ประกอบกำหนดเอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดองค์ประกอบกำหนดเอง”

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

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

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

บทเรียน “การกำหนดองค์ประกอบกำหนดเอง” ใช้เวลานานแค่ไหน

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

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

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

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

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