หน้าแรก>ซอร์สโค้ด PHP>หมวดหมู่อื่นๆ
ดาวน์โหลด

แนวทางปฏิบัติที่ดีที่สุดของ Livewire

พื้นที่เก็บข้อมูลนี้เป็นรายการคำแนะนำทั่วไปที่รวบรวมไว้เกี่ยวกับวิธีการใช้เฟรมเวิร์ก Laravel Livewire เพื่อตอบสนองข้อกังวลขององค์กรเกี่ยวกับความปลอดภัย ประสิทธิภาพ และการบำรุงรักษาส่วนประกอบ Livewire

บทนำสั้น ๆ

ฉันชื่อ Michael Rubél และฉันเริ่มใช้เฟรมเวิร์ก Livewire ในปี 2019 ตอนที่ยังเป็นเฟรมเวิร์กใหม่และแทบไม่เสถียร ย้อนกลับไปในวันนั้น ฉันประทับใจกับความรวดเร็วในการจัดส่ง UI แบบไดนามิกโดยไม่ต้องใช้ JavaScript แต่ก็เหมือนกับโซลูชันซอฟต์แวร์อื่นๆ มันมีข้อผิดพลาด และฉันต้องจัดการกับมัน เป้าหมายหลักของพื้นที่เก็บข้อมูลนี้คือการรวบรวมประสบการณ์ที่สำคัญที่สุดที่คุณต้องพิจารณาเมื่อทำงานกับ Livewire

มาเริ่มกันเลย...

ตั้งค่าองค์ประกอบรูทเสมอ

Livewire ต้องการองค์ประกอบรูท (div) ในแต่ละองค์ประกอบ คุณควรเขียนโค้ดไว้ข้างใน <div>Your Code Here</div> เสมอ การละเว้นโครงสร้างนี้จะนำไปสู่ปัญหามากมายในการอัปเดตส่วนประกอบ

ตัวอย่าง

กฎทองของนักแสดง Livewire 

Don't pass large objects to Livewire components!

หลีกเลี่ยงการส่งวัตถุไปยังคุณสมบัติสาธารณะของส่วนประกอบหากเป็นไปได้ ใช้ประเภทดั้งเดิม เช่น สตริง จำนวนเต็ม อาร์เรย์ ฯลฯ นั่นเป็นเพราะว่า Livewire ทำซีเรียลไลซ์/ดีซีเรียลไลซ์เพย์โหลดของส่วนประกอบของคุณพร้อมกับคำขอแต่ละรายการไปยังเซิร์ฟเวอร์เพื่อแบ่งปันสถานะระหว่างส่วนหน้าและส่วนหลัง หากคุณต้องการทำงานกับออบเจ็กต์ คุณสามารถสร้างออบเจ็กต์เหล่านั้นภายในวิธีการหรือคุณสมบัติที่คำนวณได้ แล้วส่งคืนผลลัพธ์ของการประมวลผล

สิ่งที่ควรพิจารณาเป็นวัตถุขนาดใหญ่?

  • อินสแตนซ์ใดก็ตามที่มีขนาดใหญ่พอๆ กับโมเดล Eloquent ก็ใหญ่เพียงพอแล้วสำหรับ Livewire ที่จะชะลอวงจรการใช้งานของส่วนประกอบ ซึ่งอาจนำไปสู่ประสิทธิภาพที่ไม่ดีในการอัปเดตแบบเรียลไทม์ ตัวอย่างเช่น หากคุณมีส่วนประกอบที่แสดงถึงโปรไฟล์ผู้ใช้ (อีเมลและชื่อผู้ใช้) ให้ส่งพารามิเตอร์เหล่านี้ไปยังคุณสมบัติเป็นสตริง

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

รักษาระดับการซ้อนส่วนประกอบไว้ที่ 1

หากคุณมีส่วนประกอบ Livewire (0) ที่มีส่วนประกอบ Livewire อื่น (1) คุณไม่ควรซ้อนองค์ประกอบนั้นให้ลึกลงไปอีก (2+) การซ้อนมากเกินไปอาจทำให้เกิดอาการปวดหัวเมื่อต้องรับมือกับปัญหาความแตกต่างของ DOM

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

ตัวอย่าง

ใช้วัตถุแบบฟอร์ม

Livewire v3 เปิดตัวเลเยอร์นามธรรมใหม่ที่เรียกว่า Form Objects ใช้สิ่งเหล่านี้เสมอเพราะจะทำให้ส่วนประกอบของคุณสามารถบำรุงรักษาได้มากขึ้นในระยะยาว

เอกสาร

อย่าส่งข้อมูลที่ละเอียดอ่อนไปยังส่วนประกอบ

หลีกเลี่ยงสถานการณ์ที่อาจนำไปสู่การส่งข้อมูลละเอียดอ่อนไปยังส่วนประกอบ Livewire เนื่องจากสามารถเข้าถึงได้ง่ายจากฝั่งไคลเอ็นต์ตามค่าเริ่มต้น คุณสามารถซ่อนคุณสมบัติจากส่วนหน้าได้โดยใช้แอตทริบิวต์ #[Locked] โดยเริ่มจาก Livewire เวอร์ชัน 3

ต้องการใช้ผู้ฟังเหตุการณ์มากกว่าการสำรวจความคิดเห็น

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

ตัวอย่าง

ใช้คุณสมบัติการคำนวณเพื่อเข้าถึงฐานข้อมูล

คุณสามารถใช้คุณสมบัติที่คำนวณเพื่อหลีกเลี่ยงการสืบค้นฐานข้อมูลที่ไม่จำเป็น คุณสมบัติที่คำนวณจะถูกแคชไว้ภายในวงจรการใช้งานของส่วนประกอบ และไม่ได้ทำงานหลายครั้งในคลาสส่วนประกอบหรือมุมมองเบลด เริ่มต้นจาก Livewire v3 ผลลัพธ์ของคุณสมบัติที่คำนวณสามารถถูกแคชไว้ในแคชระดับแอปพลิเคชันทั่วไป (เช่น Redis) ดู

ตัวอย่าง

ใช้ Route Model Binding เพื่อดึงโมเดล

ส่งเฉพาะ ID หรือ UUID ไปยังวิธี mount จากนั้นแมปแอตทริบิวต์โมเดลกับคุณสมบัติของส่วนประกอบ ข้อควรจำ: อย่ากำหนดทั้งโมเดล แต่กำหนดเฉพาะแอตทริบิวต์เท่านั้น เพื่อหลีกเลี่ยงการแมปคุณลักษณะของโมเดลด้วยตนเอง คุณสามารถใช้วิธี fill

ตัวอย่าง

หลีกเลี่ยงการใช้ live wire:model modifier หากเป็นไปได้

หลีกเลี่ยงการใช้ live wire:model modifier สิ่งนี้ช่วยลดการร้องขอที่ไม่จำเป็นไปยังเซิร์ฟเวอร์ได้อย่างมาก ใน Livewire เวอร์ชัน 3 โมเดลทั้งหมดจะถูกเลื่อนออกไปตามค่าเริ่มต้น (เก่า: defer modifier) ​​ซึ่งถือว่าดี

ตัวอย่าง

‍ ใช้คำสั่ง Artisan เพื่อสร้าง ย้าย และเปลี่ยนชื่อส่วนประกอบ

Livewire มีคำสั่ง Artisan ในตัวเพื่อสร้าง ย้าย เปลี่ยนชื่อส่วนประกอบ ฯลฯ ตัวอย่างเช่น แทนที่จะเปลี่ยนชื่อไฟล์ด้วยตนเองซึ่งอาจเกิดข้อผิดพลาดได้ง่าย คุณสามารถใช้คำสั่งต่อไปนี้:

  • php artisan livewire:move Old/Path/To/Component New/Path/To/Component

ใช้สถานะการโหลดเสมอเพื่อ UX ที่ดีขึ้น

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

ตัวอย่าง

ใช้การโหลดแบบขี้เกียจ

แทนที่จะบล็อกการแสดงเพจจนกว่าข้อมูลของคุณจะพร้อม คุณสามารถสร้างตัวยึดตำแหน่งโดยใช้เทคนิคการโหลดแบบ Lazy Loading เพื่อทำให้ UI ของคุณตอบสนองมากขึ้น

ตัวอย่าง

พัวพัน

ซิงค์ข้อมูลของคุณกับแบ็กเอนด์โดยใช้คำสั่ง $wire.entangle วิธีนี้จะทำให้โมเดลได้รับการอัปเดตทันทีที่ส่วนหน้า และข้อมูลจะคงอยู่ฝั่งเซิร์ฟเวอร์หลังจากคำขอเครือข่ายไปถึงเซิร์ฟเวอร์ ปรับปรุงประสบการณ์ผู้ใช้บนอุปกรณ์ที่ช้าได้อย่างมาก วิธีการนี้เรียกว่า "Optimistic Response" หรือ "Optimistic UI" ในชุมชนส่วนหน้าอื่นๆ

ตัวอย่าง

ใช้กฎการขอแบบฟอร์มสำหรับการตรวจสอบ

Livewire ไม่รองรับคำขอแบบฟอร์มภายใน แต่แทนที่จะฮาร์ดโค้ดอาร์เรย์ของกฎการตรวจสอบในส่วนประกอบ คุณอาจได้รับโดยตรงจากคำขอแบบฟอร์ม วิธีนี้ทำให้คุณสามารถใช้กฎการตรวจสอบเดียวกันซ้ำในเลเยอร์แอปพลิเคชันต่างๆ ได้ เช่น ในตำแหน่งข้อมูล API

ตัวอย่าง

เขียนการทดสอบคุณสมบัติเสมอ

แม้แต่การทดสอบง่ายๆ ก็สามารถช่วยได้มากเมื่อคุณเปลี่ยนแปลงบางสิ่งในส่วนประกอบ Livewire มี API การทดสอบที่ตรงไปตรงมาแต่ทรงพลัง

คุณทำงานกับ Livewire ทุกวันหรือไม่?
แนะนำแนวทางปฏิบัติที่ดีที่สุดของคุณหากคุณไม่เห็นแนวทางปฏิบัติเหล่านั้นในรายการ
หากคุณไม่แน่ใจว่าเป็นแนวทางปฏิบัติที่ดีหรือไม่ คุณสามารถเริ่มการสนทนาได้

ผู้ร่วมให้ข้อมูล

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด