การแยกองค์ประกอบและเทมเพลตย่อย

เมื่อโค้ดเบส HTML เติบโต ส่วนมาร์กอัปเดิมๆ จะปรากฏในหลายหน้า — ส่วนหัวเว็บไซต์ ส่วนท้าย แถบนำทาง การ์ดสินค้า และช่องกรอกแบบฟอร์ม การคัดลอกและวางส่วนเหล่านี้ทำให้การดูแลรักษากลายเป็นฝันร้าย การเปลี่ยนส่วนท้ายหมายถึงต้องแก้ไขทุกหน้า

ภาษาเทมเพลตฝั่งเซิร์ฟเวอร์ส่วนใหญ่ (Jinja, Liquid, ERB, EJS, Handlebars, Twig) รองรับคำสั่งรวมส่วนย่อย: {% include "header.html" %} หรือ <%- include("header") %> ขั้นตอนสร้างหรือเซิร์ฟเวอร์จะฝังส่วนย่อยลงในทุกหน้าที่รวมส่วนย่อยนั้น

JSX/TSX (React), คอมโพเนนต์แบบไฟล์เดียวของ Vue, คอมโพเนนต์ของ Svelte และคอมโพเนนต์ของ Astro นำเสนอแนวคิดเดียวกันด้วยความหมายที่ชัดเจนกว่า: คอมโพเนนต์จะห่อหุ้มโครงสร้าง รูปแบบ และพฤติกรรมไว้ด้วยกัน จากนั้นคอมไพล์เป็น HTML ณ เวลาสร้าง (SSG) หรือขณะทำงาน (SSR/CSR)

จัดกลุ่มส่วนย่อย/คอมโพเนนต์ตามจุดประสงค์: partials/layout/ สำหรับส่วนหัว/ส่วนท้าย/แถบนำทาง, partials/blocks/ สำหรับบล็อกส่วนเปิด/คุณลักษณะ/คำกระตุ้นให้ดำเนินการ, partials/forms/ สำหรับช่องข้อมูล/ปุ่ม/รายการเลือก การจัดระเบียบอย่างสม่ำเสมอช่วยให้ค้นหาคลังส่วนย่อยได้ง่ายเมื่อคลังเติบโตขึ้น

ส่วนย่อยจะมีประโยชน์มากขึ้นเมื่อรับพารามิเตอร์: {% include "button.html" with label="Save", variant="primary" %} ภายในส่วนย่อย ให้อ้างอิงพารามิเตอร์ด้วยชื่อของมัน เทมเพลตเดียวกันจะแสดงผลปุ่มที่แตกต่างกันทั่วทั้งเว็บไซต์

สำหรับส่วนย่อยที่ห่อหุ้มเนื้อหาใดๆ เช่น การ์ดและกล่องโต้ตอบ ให้ใช้รูปแบบช่องเสียบ: {% block content %}{% endblock %} ของ Jinja, {% block %} ของ Twig และพร็อพ {children} ของ JSX ส่วนย่อยที่ห่อหุ้มจะจัดเตรียมโครงร่าง ส่วนผู้เรียกใช้จะจัดเตรียมเนื้อหาภายใน

เครื่องมือสร้างเว็บไซต์แบบคงที่ (11ty, Astro, Hugo, Jekyll) จะประมวลผลส่วนรวมขณะสร้าง — HTML ที่นำไปใช้งานจริงจะไม่มีไวยากรณ์ของเทมเพลต การทำเทมเพลตแบบไดนามิก (PHP, Rails, Express+EJS) จะประมวลผลขณะรับคำขอ — ยืดหยุ่นกว่าแต่ช้ากว่า ให้เลือกตามว่าเนื้อหาต้องเปลี่ยนแปลงตามแต่ละคำขอหรือไม่

ส่วนย่อยควรมี CSS ของตัวเอง ส่วนย่อยส่วนท้ายเป็นเจ้าของ footer.css และส่วนย่อยปุ่มเป็นเจ้าของ button.css เมื่อใช้ร่วมกับขั้นตอนสร้างที่รวมเฉพาะ CSS ของส่วนย่อยที่ใช้จริงในหน้านั้น ก็จะไม่ต้องโหลด CSS ของทุกคอมโพเนนต์ในทุกหน้า

ส่วนย่อยแต่ละส่วนควรทดสอบแบบแยกอิสระได้: แสดงผลด้วยข้อมูลหลากหลายรูปแบบ แล้วตรวจสอบผลลัพธ์ เครื่องมืออย่างการทดสอบคอมโพเนนต์ด้วย Cypress หรือการทดสอบภาพรวมด้วย Jest ใช้กับส่วนย่อย HTML ได้เช่นกัน ส่วนย่อยที่ผ่านการทดสอบแล้วจะปรับเปลี่ยนได้อย่างปลอดภัยโดยไม่ต้องตรวจสอบทุกหน้าที่เรียกใช้ด้วยตนเอง

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

สร้างหน้าโดยประกอบส่วนย่อยต่างๆ เข้าด้วยกัน: ส่วนหัว + แถบด้านข้าง + เนื้อหา + ส่วนท้าย + ส่วนย่อยวิเคราะห์ข้อมูล แต่ละส่วนย่อยมีขนาดเล็กและมุ่งเน้นหน้าที่ของตนเอง ส่วนหน้าเว็บจึงกลายเป็นเพียงสคริปต์ประกอบที่เชื่อมส่วนต่างๆ เข้าด้วยกัน ทำความเข้าใจได้ง่ายกว่า HTML ไฟล์เดียวขนาด 800 บรรทัดมาก

หากต้องการแยกส่วนย่อย: ระบุมาร์กอัปที่ซ้ำกันในหลายหน้า คัดลอกไปไว้ที่ partials/X.html แทนที่แต่ละจุดด้วยคำสั่งรวมส่วนย่อย และกำหนดค่าแตกต่างระหว่างผู้เรียกใช้ให้เป็นพารามิเตอร์ ทำทีละส่วนย่อย แล้วโค้ดเบสจะดีขึ้นอย่างต่อเนื่อง

ประโยชน์หลักของการแยกส่วน HTML ที่ซ้ำกัน เช่น ส่วนท้ายเว็บไซต์ ไปเป็นส่วนย่อยคืออะไร

แยก HTML ที่ซ้ำกันออกเป็นส่วนย่อย/คอมโพเนนต์ผ่านการรวมส่วนย่อยฝั่งเซิร์ฟเวอร์ (Jinja, Twig, EJS) หรือคอมโพเนนต์ของเฟรมเวิร์ก (React, Vue, Svelte, Astro) ส่งข้อมูลผ่านพารามิเตอร์ และประกอบเนื้อหาผ่านช่องเสียบ จัดกลุ่มตามจุดประสงค์ ทดสอบแบบแยกอิสระ และถือว่าสัญญาการใช้งานของส่วนย่อยเป็น API ย้ายทีละน้อย — การแยกแต่ละครั้งลดการทำซ้ำและช่วยให้ดูแลรักษาได้ง่ายขึ้น