0Pricing
Sveltejs Academy · บทเรียน

Context สำหรับการฉีดการพึ่งพา

ฉีดบริการและการกำหนดค่าเข้าสู่คอมโพเนนต์ลูกผ่าน context

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

รูปแบบ DI

การฉีดการพึ่งพาหมายถึงการมอบสิ่งที่คอมโพเนนต์ต้องใช้ เช่น บริการและการกำหนดค่า ให้คอมโพเนนต์ แทนที่จะปล่อยให้คอมโพเนนต์สร้างสิ่งเหล่านั้นเอง

เหตุผลที่ DI ช่วยได้

ทดสอบได้ง่ายขึ้นด้วยการเปลี่ยนเป็นตัวจำลอง กำหนดค่าได้ง่ายขึ้นด้วยการเปลี่ยนการนำไปใช้งาน และนำกลับมาใช้ซ้ำได้ง่ายขึ้น

ฉีดผ่านคอนเท็กซ์

คอมโพเนนต์ตัวห่อหุ้มตั้งค่าบริการไว้ในคอนเท็กซ์ แล้วคอมโพเนนต์ลูกหลานจึงนำบริการนั้นไปใช้

setContext("apiClient", new ApiClient(apiUrl));

นำไปใช้ในคอมโพเนนต์

คอมโพเนนต์ลูกหลานเรียกใช้ getContext เพื่อดึงบริการมาใช้งาน

const api = getContext("apiClient");
async function load() { items = await api.list(); }

การเตรียมการทดสอบ

ห่อคอมโพเนนต์ที่ต้องการทดสอบด้วยผู้ให้บริการจำลอง ซึ่งฉีดบริการปลอมเข้าไป

การกำหนดค่า

ฉีดสวิตช์ฟีเจอร์ ความแตกต่างระหว่างสภาพแวดล้อม หรือโทเค็นของ theme ผ่านกลไกเดียวกัน

หลีกเลี่ยงตัวแปรส่วนกลาง

ตัวแปรส่วนกลางจำลองและทำความเข้าใจได้ยาก การใช้ DI ผ่านคอนเท็กซ์ช่วยให้สิ่งที่ต้องพึ่งพาชัดเจน

คอมโพเนนต์ผู้ให้บริการ

สร้างคอมโพเนนต์ตัวห่อหุ้มขนาดเล็ก โดยตั้งชื่อคล้าย ApiProvider สำหรับแต่ละบริการ

การประกอบ

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

<ApiProvider>
  <ThemeProvider>
    <App />
  </ThemeProvider>
</ApiProvider>

TypeScript

คอนเท็กซ์ที่กำหนดชนิดช่วยอธิบายบริการที่ฉีดเข้ามาได้ด้วยการเติมข้อความอัตโนมัติในเครื่องมือพัฒนา

การใช้งานจริง

ไคลเอนต์การยืนยันตัวตน, สวิตช์ฟีเจอร์, การวิเคราะห์ข้อมูล, การบันทึกข้อมูล และการจัดการ theme ล้วนเป็นตัวเลือกที่เหมาะกับ DI

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

เหตุใดจึงใช้ DI ผ่านคอนเท็กซ์

ทบทวน

ใช้คอนเท็กซ์เพื่อฉีดบริการ การกำหนดค่า และสิ่งที่ต้องพึ่งพาอื่น ๆ เข้าไปในแผนผังย่อยของคอมโพเนนต์ เพื่อให้ทดสอบและปรับเปลี่ยนได้ง่าย

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

บทเรียน “Context สำหรับการฉีดการพึ่งพา” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Context สำหรับการฉีดการพึ่งพา”

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

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

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

บทเรียน “Context สำหรับการฉีดการพึ่งพา” ใช้เวลานานแค่ไหน

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

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

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

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

  1. setContext() และ getContext()
  2. Context กับ Store: ควรใช้แต่ละแบบเมื่อใด
  3. Context แบบมีชนิดด้วย TypeScript
  4. Context สำหรับการฉีดการพึ่งพา
← กลับไปที่ Sveltejs Academy