Aurelia - Plugins أوريليا - الإضافات

 Aurelia - Plugins أوريليا - الإضافات

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

الإضافات القياسية

في الفصل الأخير ، رأينا كيفية استخدام التكوين الافتراضي في إطار عمل Aurelia. إذا كنت تستخدم التكوين الافتراضي ، فستتوفر مجموعة قياسية من المكونات الإضافية.

• defaultBindingLanguage () - المساعد العروض هذه طريقة سهلة لربط عرض نموذج مع عرض . لقد رأيت بالفعل بنية ربط البيانات أحادية الاتجاه ($ {someValue}) . على الرغم من أنه يمكنك استخدام لغة ربط أخرى ، فمن المستحسن استخدام لغة الربط الافتراضية.

• defaultResources () - تعطينا الموارد الافتراضية بعض التركيبات البدائية مثل if ، كرر ، إنشاء ، إلخ. يمكنك حتى بناء هذه التركيبات بنفسك ، ولكن نظرًا لاستخدامها بشكل شائع ، فقد أنشأتها Aurelia بالفعل داخل هذه المكتبة.

• جهاز التوجيه () - تستخدم معظم التطبيقات نوعًا من التوجيه. ومن ثم ، يعد جهاز التوجيه جزءًا من المكونات الإضافية القياسية. يمكنك التحقق من المزيد حول التوجيه في فصل لاحق.

• History () - عادةً ما يتم استخدام المكون الإضافي للتاريخ مع جهاز التوجيه .

• eventAggregator () - يتم استخدام هذا المكون الإضافي للاتصال عبر المكونات. يتعامل مع النشر والاشتراك في الرسائل أو القنوات داخل التطبيق الخاص بك.

الإضافات الرسمية

هذه المكونات الإضافية ليست جزءًا من التكوين الافتراضي ولكن يتم استخدامها بشكل متكرر.

• fetch () - تُستخدم إضافة الجلب لمعالجة طلبات HTTP. يمكنك استخدام بعض مكتبات AJAX الأخرى إذا أردت.

• animatorCSS () - يقدم هذا المكون الإضافي طريقة للتعامل مع الرسوم المتحركة لـ CSS.

• animator-velocity () - بدلاً من الرسوم المتحركة CSS ، يمكنك استخدام مكتبة الرسوم المتحركة Velocity. تمكننا هذه المكونات الإضافية من استخدام Velocity داخل تطبيقات Aurelia.

• الحوار () - يقدم البرنامج المساعد Dialog نافذة مشروطة قابلة للتخصيص بدرجة عالية.

• i18n () - هذا هو البرنامج المساعد للاستيعاب والترجمة.

• ui-virtualization () - الافتراضية هي مكتبة مفيدة للتعامل مع مهام واجهة المستخدم الثقيلة ذات الأداء الكبير.

• التحقق من الصحة () - استخدم هذا المكون الإضافي عندما تحتاج إلى التحقق من صحة بياناتك.

يتم صيانة جميع المكونات الإضافية الموضحة أعلاه رسميًا بواسطة فريق Aurelia Core في لحظة كتابة هذا البرنامج التعليمي. سيكون هناك بعض الإضافات المفيدة الأخرى المضافة في المستقبل. يوضح المثال التالي كيفية تكوين التطبيق الخاص بك لاستخدام المكونات الإضافية.

تثبيت الإضافات

إذا أردنا ، على سبيل المثال ، استخدام animator-css و animator-velocity ، فنحن بحاجة إلى تثبيته أولاً.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp

في الفصل الأخير ، تعلمت كيفية استخدام التكوين اليدوي. يمكننا إضافة ملحقاتنا في ملف main.js.

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}