Svelte / الأساسي: المكونات التفاعلية والملكية / الدرس 4
القوائم الشرطية والمفاتيح وتركيب snippets
احفظ هوية العنصر وإعادة استخدام البنية بقصد دون خلط العرض بتحقق المصدر أو السلطة.
في هذه الصفحة
أهداف الدرس
- اشرح فروع if وeach وهوية العنصر ذات المفتاح المستقر.
- استخدم snippets لتركيب محلي واضح وتجنب HTML الخام غير الموثوق.
موضع القائمة ليس بالضرورة هوية الكائن
تعرض each مجموعة ويخبر المفتاح Svelte بأي عنصر يرتبط الجزء عند الإضافة والحذف والترتيب. يناسب معرف مقرر ثابت أكثر من الفهرس الحالي عند وجود حالة أو تحرير. يحتاج فرادة واستقراراً لعمر العنصر، ولا يفوض أو يتحقق من المصدر. افصل الترتيب والتصفية واختبر تحرك العنصر لا أول عرض فقط. قد يبقى النص الظاهر صحيحاً بينما يرتبط حقل تحرير بحالة صف آخر إذا حمل الفهرس معنى هوية لم يقصده المجال، ولهذا يحتاج الاختبار تفاعلاً قبل إعادة الترتيب وبعدها.
اجعل إعادة استعمال البنية صريحة عبر snippet
يعرف الجزء snippet بطاقة ويعرضها داخل قائمة ذات مفتاح، ويتلقى معامل مقرر لا حالة عامة غير معنية. هو تركيب بنية لا مدخل مفوض أو سجل دائم. قد يناسب المكون الكامل دورة أو سلوكاً مشتركاً أوAPI خصائص عامة. يفترض courses كإدخال عام متحقق. لم يشغل مترجم أوDOM فتبقى هوية الصف وsnippet سلوك إطار غير مختبر. يجب أن يراجع القارئ من أين تأتي القائمة وأي حقول يجوز عرضها، لأن إعادة استعمال البنية الصحيحة لا تصلح نموذج بيانات حمل خاصاً بغير قصد.
<script>
let { courses } = $props();
</script>
{#snippet card(course)}
<li><h2>{course.title}</h2></li>
{/snippet}
<ul>
{#each courses as course (course.id)}
{@render card(course)}
{/each}
</ul>يمثل course.id الهوية المعلنة، ولم يفحص المترجم التكرار أو يعرض snippet.
مثل الفراغ والانتظار والفشل بقصد
ميز فراغاً ناجحاً وتعذر البيانات وانتظارها. لا تنفي القائمة الفارغة وجود خاص ولا يكشف الانتظار بنية محمية قبل السماح. لـawait والعرض غير المتزامن سلوك خادمي بإصدار فلا تستنتج SSR من نمط عميل. وضح الحالات المتوقعة ومرر غير المتوقع بعقد آمن. يعطي ذلك رسالة حالة وتعافٍ مفيدين بدل فراغ واحد لكل نتيجة. لا يحتاج المستخدم معرفة استثناء المصدر الخام لكنه يحتاج التمييز بين لا نتائج وبين تعذر البحث، وإلا قد يتخذ قراراً خاطئاً اعتماداً على شاشة بدت كأنها أكملت القراءة.
ارفض هوية المصدر الملتبسة قبل العرض
يفحص المحقق معرفات نصية فريدة ويرفض التكرار قبل قائمة الإطار. هذه قاعدة مصدر لا خوارزمية مطابقة Svelte، وقد يحتاج الحقيقي نظاماً آخر ونطاق مستأجر. لا يخمن الاختبار تعافي DOM من مفاتيح مخالفة. ولا يثبت الفرادة العنوان أو الترتيب أو الأهلية؛ افصل العقود. يفيد الرفض المبكر في إبقاء خلل بيانات واضحاً بدلاً من توليد مفاتيح عشوائية تخفي التكرار وتغير هوية الصف مع كل عرض، فتجعل فقد حالة التحرير يبدو مشكلة أداء أو انتقال فقط.
function uniqueIds(rows) {
const ids=rows.map(row=>row.id);
return ids.every(id=>typeof id==="string") && new Set(ids).size===ids.length;
}
console.assert(uniqueIds([{id:"c1"},{id:"c2"}]));
console.assert(!uniqueIds([{id:"c1"},{id:"c1"}]));
console.assert(!uniqueIds([{id:7}]));تقبل النصوص الفريدة وترفض المكررة والنوع المخالف دون مطابقة Svelte أو حالة DOM.
افصل النص المهرب عن قدرة HTML الخام
يختلف إدراج النص العادي وHTML الخام في الثقة. استخدم نصاً للعنوان غير الموثوق، ويحتاج الخام سياسة وفحصاً مناسبين للمصدر والسياق. لا تسم استبدال نص منزلياً معقماً كاملاً. تحتاج snippet ملكية معامل وبنية متاحة. اختبر ترتيب صف محرر والفراغ والخطأ معزولاً بمكون ومتصفح. ينفذ المقرر المعرف فقط دون شرط أوترجمة أوتحديث أوهروب أوHTML. يحفظ القيد قيمة الاختبار ولا يحوله لادعاء أمن قائمة كاملة قد تتضمن محتوى أو روابط لم تمر بأي سياسة.
الأخطاء الشائعة وإصلاحها
تتبع حالة صف محرر عنصراً خاطئاً بعد الفرز
- لماذا يحدث؟
- استعمل موضع المصفوفة حيث كانت هوية مجال مستقرة مطلوبة.
- كيف تصلحه؟
- استخدم مفاتيح مستقرة فريدة واحفظ عقد حالة الصف المقصود.
- كيف تتجنب تكراره؟
- اختبر إعادة الترتيب والحذف بعد تحرير المستخدم.
تعيد مفاتيح عشوائية ضبط الحالة مع كل تحديث
- لماذا يحدث؟
- أخفت المفاتيح الهوية بدلاً من تمثيلها.
- كيف تصلحه؟
- استخرج المفاتيح من معرفات كائن ثابتة متحقق منها.
- كيف تتجنب تكراره؟
- احفظ عينات حفظ الحالة أثناء تغير القائمة.
يعرض HTML خام محتوى تنفيذياً غير موثوق
- لماذا يحدث؟
- اختلط حد ثقة النص بحد ثقة البنية الخام.
- كيف تصلحه؟
- فضل النص المهرب أو مسار محتوى وتعقيم مراجعاً.
- كيف تتجنب تكراره؟
- راجع سياقات الإخراج الفعلية لا فحص سلسلة فقط.
اختبر فهمك
1. هل تثبت uniqueIds صحة القائمة المعروضة؟
اعرض الحل المشروح
لا. تفحص قاعدة مصدر واحدة هي فرادة المعرف النصي، ولا الترتيب أوالأهلية أوالعنوان أوsnippet أوDOM. احتفظ بالدليل ثم اختبر القائمة المترجمة بالإضافة والفرز والحذف وحالة صف محرر في متصفح معزول مأذون.
2. لماذا تختلف قائمة فارغة ناجحة عن فشل المصدر؟
اعرض الحل المشروح
يعني الفراغ إكمال البحث المسموح بلا مطابق، ولا يثبت التعذر ذلك. يضلل الدمج ويخفي الأعطال. احفظ حالات آمنة وتعافياً صريحاً دون رسائل مصدر خاصة.
أهم ما تعلمته
- تعبر المفاتيح عن هوية مستقرة لا موضع مصفوفة.
- تحتاج البنية المعاد استعمالها عقود بيانات وثقة صريحة.