التحسين التدريجي للنماذج
صمّم نماذج تعمل دون JavaScript وتتحسن بسلاسة عند توفرها
التحسين التدريجي للنماذج درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا يعني PE
التحسين التدريجي هو بناء تجربة أساسية تعمل للجميع، ثم إضافة تحسينات إليها تدريجيًا.
الأساس من دون JavaScript
تعمل نماذج HTML التي تستخدم method=POST من دون JavaScript. ويتولى SvelteKit معالجتها على الخادم.
مع طبقة JavaScript
أضف use:enhance لإرسال النماذج من جانب العميل من دون إعادة تحميل كاملة.
التحقق من جانب الخادم
تحقق دائمًا من البيانات على الخادم. أما التحقق من جانب العميل فهو لتحسين تجربة الاستخدام فقط.
تجنب e.preventDefault
دع enhance في SvelteKit يتولى preventDefault. فالمعالجة اليدوية تلغي مسار العمل من دون JavaScript.
مؤشرات التحميل
اعرض مؤشرات التحميل أثناء عمليات الإرسال عبر fetch، وأخفها فور وصول الاستجابة.
تجربة استخدام متينة
إذا تعذر تحميل JavaScript، فستظل نماذجك تعمل. ويستفيد المستخدمون على الشبكات البطيئة من ذلك.
إمكانية الوصول
استخدم تسميات مناسبة ومناطق aria-live للإعلان عن الأخطاء.
طبقة التحقق من النموذج
توفر سمات HTML5 مثل required وtype وpattern تحققًا مجانيًا من جانب العميل.
<input type="email" required minlength="3" />الثقة بالخادم
لا تثق مطلقًا في التحقق من جانب العميل. أعد التحقق على الخادم قبل حفظ البيانات.
مثال من الواقع
يجب أن يصادق نموذج تسجيل الدخول على المستخدم عبر POST. وإذا كان JavaScript مفعّلًا، فاستخدم enhance لسلاسة التجربة. وإلا فسيظل الإرسال الكامل يعمل.
تحقق سريع
لماذا يجب إجراء التحقق من جانب الخادم؟
مراجعة
أنشئ نماذج تعمل من دون JS، ثم حسّنها باستخدام use:enhance. وأجرِ التحقق دائمًا من جانب الخادم.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «التحسين التدريجي للنماذج» مجاني؟
نعم — نص درس «التحسين التدريجي للنماذج» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحسين التدريجي للنماذج»؟
صمّم نماذج تعمل دون JavaScript وتتحسن بسلاسة عند توفرها تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التحسين التدريجي للنماذج»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- +page.server.js مع الإجراءات
- توجيه use:enhance
- التحسين التدريجي للنماذج
- معالجة أخطاء التحقق في الإجراءات