استخراج المكونات والقوالب الجزئية

كلما كبر مشروع HTML، ظهرت الأجزاء نفسها من الترميز في صفحات كثيرة، مثل ترويسة الموقع وتذييله وشريط التنقل وبطاقة المنتج وحقل النموذج. يؤدي النسخ واللصق إلى كابوس في الصيانة؛ فتغيير التذييل يعني تعديل كل صفحة.

تدعم معظم لغات إنشاء القوالب من جانب الخادم، مثل Jinja وLiquid وERB وEJS وHandlebars وTwig، توجيهات التضمين: {% include "header.html" %} أو <%- include("header") %>. تضع عملية البناء أو الخادم الجزء الجزئي داخل كل صفحة تتضمنه.

تعبّر مكونات JSX/TSX في React وملفات Vue SFC ومكونات Svelte ومكونات Astro عن الفكرة نفسها بدلالات أقوى؛ إذ ي encapsulate المكوّن البنية والتنسيقات والسلوك. وتُحوّل هذه المكونات إلى HTML أثناء البناء (SSG) أو أثناء التشغيل (SSR/CSR).

جمّع الأجزاء الجزئية والمكونات حسب الغرض: partials/layout/ للترويسة والتذييل وشريط التنقل، وpartials/blocks/ لأقسام hero وfeature وcta، و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 المتكرر إلى أجزاء جزئية أو مكونات باستخدام التضمين من جانب الخادم، مثل Jinja وTwig وEJS، أو باستخدام مكونات أطر العمل، مثل React وVue وSvelte وAstro. مرّر البيانات عبر المعاملات، وأنشئ التركيب عبر الفتحات. جمّع الأجزاء حسب الغرض، واختبرها بمعزل عن غيرها، وتعامل مع توقيع الجزء الجزئي باعتباره API. نفّذ الترحيل تدريجيًا؛ فكل عملية استخراج تقلل التكرار وتحسّن قابلية الصيانة.