مقدمة للتوجيه في Svelte

Svelte هو إطار عمل ويب سريع النمو يمكنك استخدامه لبناء مواقع الويب. يقدم نفسه كبديل خفيف الوزن وسهل الاستخدام لأطر العمل الشائعة مثل React و Vue.

يحتوي كل إطار عمل JavaScript شائع على مكتبة مصاحبة يمكنك استخدامها للتوجيه. اكتشف كيف يتيح لك Svelte إدارة عناوين URL الخاصة بك والكود الذي يتعامل معها.

مكتبات التوجيه الشعبية

مكتبة التوجيه الأكثر شيوعًا لـ React هي React Router، تم إنشاؤه بواسطة فريق Remix. بالنسبة إلى VueJS ، يوجد Vue Router الذي يمنح المطور تحكمًا دقيقًا في أي تنقل. في عالم Svelte ، تعتبر مكتبة التوجيه الأكثر شيوعًا هي سفلت التوجيه.

مكتبة التوجيه الرئيسية الأخرى لـ Svelte هي رشيق الملاح. لأنها شوكة سفلت التوجيه، من المفيد التعرف على تلك المكتبة أولاً.

كيف تعمل مكتبة svelte-routing

هناك ثلاثة مكونات مهمة للتعامل مع المسارات في Svelte: جهاز التوجيه, وصلة، و طريق. لاستخدامها في تطبيقك ، يمكنك ببساطة استيراد هذه الأدوات المساعدة من ملف سفلت التوجيه مكتبة.

<النصي>
استيراد {Route، Router، Link} من "svelte-routing" ؛
النصي>

يمكن أن يحتوي مكون جهاز التوجيه على خاصيتين اختياريتين: باسيباث و عنوان url. ال باسيباث الخاصية مشابهة لـ الاسم الأساسي دعم في جهاز التوجيه React.

بشكل افتراضي ، يتم تعيينه على "/". يمكن أن يكون Basepath مفيدًا إذا كان التطبيق الخاص بك يحتوي على نقاط دخول متعددة. على سبيل المثال ، ضع في اعتبارك رمز Svelte التالي:

<النصي>
 استيراد {Route، Router، Link} من "svelte-routing" ؛
 السماح basepath = "/ المستخدم" ؛
 اسمح المسار = location.pathname ؛
النصي>
<جهاز التوجيه {باسيباث}>
<شعبةعند النقر={() => (المسار = location.pathname)}>
<وصلةل="/">اذهب الى المنزلوصلة>
<وصلةل="/ user / david">تسجيل الدخول باسم ديفيدوصلة>
شعبة>
<رئيسي>
 أنت هنا: <شفرة>{طريق}شفرة>
<طريقطريق="/">
<h1>مرحبا بك في البيت!h1>
طريق>
<طريقطريق="/ ديفيد">
<h1>مرحبا يا ديفيد!h1>
طريق>
رئيسي>
جهاز التوجيه>

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

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

<طريقطريق="/عن"عنصر={عن}/>

تخبر كتلة التعليمات البرمجية أعلاه المتصفح بعرض ملف برنامج المكون عندما يكون اسم المسار "/ حول".

عند استخدام سفلت التوجيه، حدد الروابط الداخلية بامتداد وصلة بدلاً من HTML التقليدي أ عناصر.

هذا مشابه لكيفية تعامل React Router مع الروابط الداخلية ؛ يجب أن يحتوي كل مكون من مكونات الارتباط على ملف ل الخاصية التي تخبر المتصفح بالمسار الذي يجب الانتقال إليه.

عندما يعرض المستعرض مكون Svelte ، يقوم Svelte تلقائيًا بتحويل جميع مكونات الارتباط إلى مكافئ أ العناصر ، لتحل محل ل دعم مع href يصف. هذا يعني أنك عندما تكتب ما يلي:

<وصلةل="/ بعض / المسار">هذا هو مكون ارتباط في svelte-routingوصلة>

يقدمه Svelte للمتصفح على النحو التالي:

<أhref="/ بعض / المسار">هذا هو مكون ارتباط في svelte-routingأ>

يجب عليك استخدام مكون الارتباط بدلاً من المكون التقليدي أ عنصر عند العمل مع svelte-routing. هذا بسبب أ العناصر تؤدي إلى إعادة تحميل الصفحة بشكل افتراضي.

إنشاء SPA مع Svelte و Svelte-Routing

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

للبدء ، تأكد من تثبيت Yarn على جهازك وقم بتشغيل:

الغزل يخلق vite

سيؤدي هذا إلى دعم مشروع جديد باستخدام أداة Vite build. قم بتسمية مشروعك ثم اختر "Svelte" كإطار العمل و "JavaScript" كمتغير. بعد ذلك ، قم بتشغيل الأوامر التالية واحدة تلو الأخرى:

قرص مضغوط
غزل
إضافة الغزل الرقيق التوجيه
ديف الغزل

بعد ذلك ، احذف محتويات ملف التطبيق ملف وتغيير هيكل المشروع ليبدو كما يلي:

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

انتقل إلى التطبيق ملف واستيراد مكونات المسار والموجه والرابط من مكتبة svelte-routing. تأكد أيضًا من استيراد ملف الصفحة الرئيسية و التطبيق عناصر.

<النصي>
 استيراد {Route، Router، Link} من "svelte-routing" ؛
 استيراد الصفحة الرئيسية من "./components/Home.svelte" ؛
 استيراد المعنى من "./components/Meaning.svelte" ؛
النصي>

بعد ذلك ، قم بإنشاء مكون جهاز توجيه يلتف بملف رئيسي عنصر HTML مع فئة "app".

<جهاز التوجيه>
<رئيسيفصل="برنامج">
رئيسي>
جهاز التوجيه>

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

<رئيسيفصل="برنامج">
<التنقل>
<وصلةل="/">بيتوصلة>
التنقل>
رئيسي>

حان الوقت الآن للعمل على الطرق. عندما يقوم المستخدم بتحميل التطبيق ، فإن ملف بيت يجب أن يقدم المكون.

يجب أن يؤدي الانتقال إلى "/ find /: word" إلى عرض ملف معنى عنصر. عبارة ": word" هي معلمة مسار.

بالنسبة لهذا المشروع ، لا داعي للقلق بشأن CSS. ببساطة استبدل المحتويات الخاصة بك app.css ملف بمحتويات app.css ملف من مستودع جيثب هذا.

حان الوقت الآن لتحديد الطرق. يجب أن يعرض مسار مستوى الجذر ملف بيت المكون ، بينما "/ find /: word" يجب أن يعرض ملف معنى عنصر.

<طريقطريق="/"عنصر={بيت} />
<طريقطريق="/ بحث /: كلمة"اسمحوا: البارامز>
<معنىكلمة={params.word} />
طريق>

تستخدم كتلة التعليمات البرمجية هذه الامتداد يترك توجيه لتمرير معلمة "الكلمة" وصولاً إلى معنى مكون كدعم.

الآن ، افتح ملف الصفحة الرئيسية ملف واستيراد ملف التنقل فائدة من مكتبة "svelte-routing" وتحديد متغير تم إدخال كلمة.

<النصي>
 استيراد {navigate} من "svelte-routing" ؛
 دعنا ندخل
النصي>

تحت النصي علامة ، قم بإنشاء عنصر رئيسي باستخدام "الصفحة الرئيسية" للفصل ، ثم قم بإنشاء ملف شعبة عنصر بالفئة "نص القاموس".

<رئيسيفصل="الصفحة الرئيسية">
<شعبةفصل="نص القاموس">قاموسشعبة>
رئيسي>

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

<استمارةعند تقديم|منع افتراضي={() => انتقل (`/ find / $ {EnterWord.toLowerCase ()}`)}>
<مدخل
 اكتب = "نص"
 ربط: القيمة = {إدخال كلمة}
 placeholder = "ابدأ البحث ..."
 ضبط تلقائي للصورة
 />
 {#if دخلتWord}
<زريكتب="يُقدِّم">كلمة البحثزر>
 {/لو}
استمارة>

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

تصدير كلمة ؛
دع errorMessage = "لا يوجد اتصال. تحقق من الإنترنت الخاص بك "؛

بعد ذلك ، قم بتقديم طلب GET إلى Dictionary API مروراً بملحق كلمة كمعلمة:

غير متزامنوظيفةgetWordMeaning(كلمة) {
مقدار ثابت استجابة = انتظر أحضر(
` https://api.dictionaryapi.dev/api/v2/entries/en/$ {word}`
 );
مقدار ثابت json = انتظر response.json () ؛
وحدة التحكم.log (json) ؛
لو (response.ok) {
يعود json.
 } آخر {
 errorMessage = json.message ؛
يرميجديدخطأ(json) ؛
 }
 }
يترك الوعد = getWordMeaning (كلمة) ؛

في مقطع التعليمات البرمجية أعلاه ، ترجع الدالة غير المتزامنة بيانات JSON إذا كانت الاستجابة ناجحة. يمثل متغير الوعد نتيجة getWordMeaning تعمل عند استدعائها.

في الترميز ، حدد div مع الفئة صفحة المعنى. بعد ذلك ، حدد عنصر h1 يحمل الامتداد كلمة متغير بالحروف الصغيرة:

<شعبةفصل="صفحة المعنى">
<h1>
 {word.toLowerCase ()}
h1>
شعبة>

بعد ذلك ، استخدم كتل انتظار Svelte لاستدعاء ملف getWordMeaning وظيفة:

{#await وعد}
<ص>تحميل...ص>
{: ثم إدخالات}
{:يمسك}
 {رسالة خطأ}
{/ انتظار}

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

في ال {: ثم إدخالات} بلوك ، أضف ما يلي:

{# كل إدخال كإدخال}
 {#each entry.meanings كمعنى}
<شعبةفصل="دخول">
<شعبةفصل="جزء من الكلام">
 {معنى. partOfSpeech}
شعبة>
<رأ>
 {# كل معنى. تعريفات كتعريف}
<لي>
 {تعريف}
<ر />
<شعبةفصل="مثال">
 {#if definition.example}
 {Definition.example}
 {/لو}
شعبة>
لي>
 {/كل}
رأ>
شعبة>
 {/كل}
{/كل}

إذا تم حل الوعد بنجاح ، فإن إدخالات متغير يحتوي على البيانات الناتجة.

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

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

تحسين تجربة المستخدم مع التوجيه من جانب العميل

هناك العديد من الفوائد للتعامل مع التوجيه في المتصفح بدلاً من الخادم. يمكن أن تشعر التطبيقات التي تستفيد من التوجيه من جانب العميل بمزيد من السلاسة للمستخدم النهائي ، خاصة عند إقرانها بالرسوم المتحركة والانتقالات.

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