محتوى قالب HTML: لماذا تظهر البطاقات في الحاوية الأولى فقط؟

الخلاصة السريعة

• ينقل appendChild أبناء الجزء إلى الوجهة، ويعيد الجزء بعد إفراغه. [2]
• في مسارنا المباشر استقبلت الحاوية الأولى بطاقتين وبقيت الثانية فارغة.
• في مسار النسخ احتفظ القالب ببطاقتيه، وحصلت كل حاوية على اثنتين.
• نسخ المصدر بعد إفراغه في اختبارنا لم يستعد البطاقات.

بطاقتان نعرفهما قبل البدء

كتبنا داخل قالب صغير فقرتين فقط: «بطاقة نهر» ثم «بطاقة غابة». وأنشأنا حاويتين فارغتين أسميناهما A وB. لا توجد مسافة أو سطر مستقل بين الفقرتين في النص الذي وضعناه، ونعد العناصر تحديدا باستخدام childElementCount.

نفذنا تجربتنا في Edge 155.0.4283.45. لكل مسار قالب جديد وحاويتان جديدتان؛ لذلك لم يبدأ مسار النسخ من القالب الذي استهلكه المسار المباشر. سجلنا ثلاث خانات بالترتيب: عدد عناصر محتوى القالب، ثم عدد عناصر A، ثم عدد عناصر B.

كانت البداية في المسارين 2 و0 و0. هذا السطر مرجع التجربة: إذا بدأ اختبار آخر بقالب فارغ، فلن تكون مقارنة خطواته بجدولنا مقارنة للمدخل نفسه. لهذا احتفظنا بالنص الأصلي بجانب النتائج، ولم نكتف بصورة الحاويتين في النهاية.

مسار مباشر يصل مرة واحدة

عندما يكون المدخل DocumentFragment، تنتقل محتوياته إلى قائمة أبناء الأب المقصود؛ لا يصبح الجزء نفسه غلافا جديدا حولها. والقيمة المعادة من هذا الاستدعاء هي الجزء الفارغ. [2]

أدرجنا محتوى القالب نفسه في A. صار سجلنا 0 و2 و0، ووجدنا الفقرتين في A بالترتيب الذي كتبناه. ثم مررنا المحتوى نفسه إلى B، فبقي السجل 0 و2 و0. لم تنتقل البطاقتان من A إلى B في هذه الخطوة؛ كنا نمرر الجزء الذي صار فارغا.

فحصنا أيضا هوية القيمة المعادة من الإدراج الأول: كانت محتوى القالب نفسه، وعدد عقدها صفر. أما البطاقتان فكانتا في A. هذا الفحص يفسر لماذا لا يصلح وصف القيمة المعادة بأنها «الحاوية التي امتلأت» في تجربتنا.

ابدأ من المصدر الجديد لكل وجهة

في المسار الثاني بدأنا بقالب جديد يحمل النص نفسه. أخذنا نسخة من محتواه للحاوية A، ثم أخذنا نسخة أخرى للحاوية B. سجلنا بعد الخطوة الأولى 2 و2 و0، وبعد الثانية 2 و2 و2؛ بقيت بطاقتا المصدر متاحتين أثناء الخطوتين.

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

قارنّا أول بطاقة في A بأول بطاقة في B من حيث هوية العقدة، فلم تكونا العقدة نفسها. وقرأنا النصين في كل حاوية فكانا «بطاقة نهر» ثم «بطاقة غابة». اتفاق الكتابة هنا لا يعني أن الحاويتين تشتركان في العنصر نفسه.

اقرأ سجل الشيفرة بالترتيب

تجري الدالة التالية مسارا واحدا في كل استدعاء. تمرر false لتجربة الإدراج المباشر، ثم true لتجربة النسخ. يطبع كل استدعاء سطرين بعد الإدراج، أما سطر البداية في الجدول فقرأناه في فحص مستقل قبل الحلقة.

شغّلنا الشيفرة المعروضة نفسها وقارنّا أسطرها الأربعة بالتوقعات. ركز على موضع إنشاء القالب: يقع داخل الدالة، لا خارجها. لذلك يعيد الاستدعاء الثاني بناء المدخل ولا يرث فراغ الاستدعاء الأول.

function trial(copy) {
  const t=document
    .createElement("template");
  t.innerHTML=
    '<p>بطاقة نهر</p>'+
    '<p>بطاقة غابة</p>';
  const a=document
    .createElement("div");
  const b=document
    .createElement("div");
  for (const target of [a,b]) {
    const f=copy
      ? document.importNode(
          t.content,true)
      : t.content;
    target.appendChild(f);
    console.log(
      t.content.childElementCount,
      a.childElementCount,
      b.childElementCount);
  }
}
trial(false);
trial(true);

[1] [2]

توقيت النسخ جزء من الحل

أجرينا اختبارا إضافيا على القالب الذي فرغ في المسار المباشر: أخذنا منه نسخة بعد الخطوتين، فكان عدد عناصرها صفرا. تغيير طريقة الإدراج بعد فقدان محتويات المصدر في هذا المثال لم ينشئ البطاقتين من جديد.

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

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

المراجع

1. MDN — محتوى القالب
   https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
2. MDN — appendChild
   https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild