Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

مكونات الكهرمان: A Deep Dive

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

Ember.js هو إطار عمل JavaScript MVC يسمح للمطورين بإنشاء تطبيقات ويب طموحة. على الرغم من أن MVC النقي يسمح للمطورين بفصل المخاوف ، إلا أنه لا يوفر لك جميع الأدوات وسيحتاج تطبيقك إلى بنى أخرى. اليوم ، سأتحدث عن واحدة من تلك البنى. مكونات Ember هي في الأساس عبارة عن قطع يمكن إعادة استخدامها في واجهة المستخدم. إذا لم تكن مألوفًا مع Ember ، فالرجاء التحقق منبدء استخدام Ember.js أو Let Let's Learn Ember Course . في هذا البرنامج التعليمي ، سنقوم بتغطية مواصفات Web Components ، ونتعلم كيفية كتابة أحد المكونات في Ember ، والتحدث عن التكوين ، وشرح الفرق بين عرض Ember ومكون Ember ، وممارسة دمج المكونات الإضافية مع مكونات Ember.


كلمة عن مكونات الويب

تعتمد مكونات Ember على مواصفات W3C Web Components . تتكون المواصفات من أربعة مواصفات أصغر. قوالب ، والديكور ، الظل DOM ، وعناصر مخصصة.  من بين هذه المفاهيم الأربعة ، ثلاثة منها فقط تحتوي على مواصفات شديدة الصلابة.  من خلال وجود المواصفات في مكانها ، تمكن مطورو الأطر من ملاءمة هذه واجهات برمجة التطبيقات الجديدة قبل تنفيذها من قبل موردي المتصفح.

هناك العديد من المفاهيم الهامة التي يجب فهمها عند الحديث عن المكونات:

  • لا تعرف المكونات شيئًا عن العالم الخارجي ما لم يتم تمريره بشكل صريح
  • يجب أن تحتوي المكونات على واجهة محددة بشكل جيد للعالم الخارجي
  • لا يمكن للمكونات التعامل مع أي جافا سكريبت خارج المكون
  • يجب أن تكون العناصر المخصصة تحمل اسمها واصلة
  • يجب أن تكون العناصر المخصصة تحمل اسمها بواصلة
  • لا تستطيع جافا سكريبت الخارجية معالجة المكونات

توفر مكونات الويب التغليف الصحيح لعناصر واجهة المستخدم. فيما يلي رسم تخطيطي لكيفية عمل المكون على المستوى الأساسي.

Web Component Diagram

في حين نجحت Ember في وضع العديد من المواصفات ، فإن أطر العمل مثلAngularJS و Dart و Polymer و Xtags لها حلول مماثلة. التوضيح الوحيد هنا هو أن Ember و Angular لا يقومان حاليًا بتطبيق أنماط النطاق على المكون. وبمرور الوقت ، سوف تتلاشى حلول polyfill هذه ، وسوف تتبنى أطر العمل تنفيذ بائع المتصفح.  هذا نهج مختلف تمامًا للتنمية ، حيث يمكننا الاستفادة من المواصفات المستقبلية دون ربط أنفسنا بالميزات التجريبية في المتصفحات.


أكثر مكونات العنبر الأساسي

من خلال معرفتنا لمكونات الويب ، دعنا ننفذ المكون الأساسي للاسم من الأعلى ، ولكن في Ember. لنبدأ بتنزيل مجموعة Ember Starter Kit من موقع Ember الإلكتروني . في وقت هذا البرنامج التعليمي ، فإن إصدار Ember هو 1.3.0. بمجرد أن لديك تحميل فتح الملفات في محرر المفضلة لديك، حذف كافة القوالب في index.html و (الرمز مع قالب اسم البيانات) وكل شيء في app.js .

أول شيء سنقوم بفعله هو إنشاء قالب المكون الخاص بنا. من أجل هذا البرنامج التعليمي سوف نستخدم قوالب مضمنة. يمكنك القيام بذلك عن طريق كتابة ما يلي في ملف index.htmlالخاص بك . نحتاج أيضًا إلى إنشاء تطبيق Ember جديد في JavaScript.

ستلاحظ أن اسم قالب البيانات يحتوي على اسم مسار بدلاً من سلسلة بسيطة فقط. السبب في أننا نسبق اسم المكون الخاص بنا بـ "المكونات /" هو إخبار Ember بأننا نتعامل مع قالب مكون وليس قالب تطبيق عادي.  ستلاحظ أيضًا أن اسم المكون يحتوي على الواصلة فيه.هذه هي مساحة الاسم التي ذكرتها في مواصفات Web Components. يتم إجراء Namespacing بحيث لا يكون لدينا تضارب في الأسماء مع العلامات الموجودة.

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

Ember Name Component

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

عند تحديث الصفحة ، سترى "مرحبًا ، اسمي تشاد" . كل هذا مع كتابة سطر واحد من JavaScript. الآن بعد أن شعرنا بكتابة مكون أساسي ، دعنا نتحدث عن الفرق بين مكونات Ember و Ember views.


مكونات العنبر مقابل

Ember هو MVC ، لذلك قد يفكر البعض ، "لماذا لا نستخدم مجرد عرض لهذا؟" هذا سؤال مشروع. المكونات في الواقع فئة فرعية من Ember.View ، الفرق الأكبر هنا هو أن يتم العثور على وجهات النظر عموما في سياق وحدة تحكم. خذ المثال أدناه.

عادةً ما تجلس المشاهدات خلف قالب وتحويل الإدخال الخام (انقر ، أو mouseEnter ، أو mouseMove ، إلخ) إلى إجراء دلالي (openMenu ، editName ، hideModal ، إلخ) في وحدة تحكم أو مسار. jشيء آخر للإشارة إلى أن القوالب تحتاج إلى سياق كذلك. إذن ، ما يحدث في النهاية هو أن Ember ينقل السياق من خلال اصطلاحات التسمية وعنوان URL. انظر الرسم البياني أدناه.

Ember Hierarchy

كما ترى ، هناك مستوى من التسلسل الهرمي يستند إلى عنوان URL وكل مستوى من هذا التسلسل الهرمي له سياقه الخاص الذي يتم اشتقاقه من خلال اصطلاحات التسمية.

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

Ember Hierarchy With Components

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


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

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

Ember Group Chat Component

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

Group Chat Breakdown

لنبدأ بإنشاء ملف html جديد يسمى chat.html وإعداد جميع التبعيات لـ Ember.بعد ذلك قم بإنشاء كل القوالب.

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

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

Group Chat Without Data

f

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

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

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

Group Chat Partially Filled With Data

من خلال المكون الخاص بالمستخدم ، نريد استخدام خدمة تسمى Avatars.io لجلبصورتك الشخصية على Twitter استنادًا إلى اسم مستخدم Twitter الخاص به. دعونا ننظر في كيفية استخدام مكون صورة المستخدم في القالب.

f  شيء آخر ستلاحظه هو أننا نحدد الخدمة التي نرغب في جلب الصورة الرمزية منها.  يتيح لك Avatars.io جلب صور شخصية إجتماعية من Twitter و Facebook و Instagram. يمكننا جعل هذا المكون شديد المرونة. دعونا نكتب المكون.

كما ترى ، لإنشاء مكون جديد نتبع فقط اصطلاح التسمية لـNAMEOFCOMPONENTComponent وتمديد Ember.Component . الآن إذا عدنا إلى المتصفح ، يجب علينا الآن رؤية الصور الرمزية الخاصة بنا.

Group Chat Without Formatted Date

لرعاية تنسيق التاريخ دعنا نستخدم moment.js وكتابة مساعد Handlebars لتنسيق التاريخ بالنسبة لنا.

الآن كل ما نحتاج إلى القيام به هو تطبيق المساعد على مكون طابع الوقت لدينا.

يجب أن يكون لدينا الآن مكون يقوم بتهيئة التواريخ بدلاً من الطوابع الزمنية لحقبة Unix.

Group Chat With Dates

يمكننا أن نفعل واحد أفضل على الرغم من. يجب تحديث هذه الطوابع الزمنية تلقائيًا على مدار الوقت ، لذلك دعنا نجعل مكون طابع الوقت لدينا يفعل ذلك بالضبط.

هناك نقطتان يجب ملاحظتهما هنا. واحد هو بناء جملة معالج الحدث التقريري on () .تم تقديم هذا في Ember قبل الإصدار 1.0. يفعل بالضبط ما تعتقد أنه ، عندما يتم إدراج مكون الطابع الزمني في DOM ،يتم استدعاء scheduleStartTime . عندما يكون العنصر على وشك أن يتم تدميره وسيتم تنظيف طريقة killTimer . بقية المكون يخبر فقط الوقت لتحديث كل دقيقة.

الشيء الآخر الذي ستلاحظه هو أن هناك عدة مكالمات إلى Ember.run . يوجد في Ember نظام انتظار ، يُشار إليه عادة باسم حلقة التشغيل ، التي يتم مسحها عند تغيير البيانات. يتم ذلك أساسا لتجميع التغييرات وإجراء التغيير مرة واحدة. في مثالنا ، سنستخدم Ember.run.later لتشغيل طريقة startTimer في كل دقيقة.سنستخدم أيضًا Ember.run.cancel لإضفاء الطابع الموقت على dequeue. f

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

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

الشيء الغريب الآخر الذي تراه هنا هو طريقة Ember.run.schedule التي يتم استدعاؤها. مرة أخرى هذا هو حلقة تشغيل امبر في العمل. ستلاحظ أن الجدول الزمني يأخذ سلسلة كوسيطة الأولى ، في هذه الحالة "afterRender". لدى Ember بالفعل العديد من الطوابير المختلفة التي تديرها ، مما يجعلها واحدة منها. لذلك في حالتنا نحن نقول عندما يتم إرسال الرسالة مما يجعل أي تلاعب وبعد مسح طابور ، استدعاء الاتصال بنا. سيؤدي هذا إلى التمرير إلى أسفل حيث يمكن للمستخدم رؤية الرسالة الجديدة بعد أي تلاعب.لمزيد من المعلومات حول حلقة التشغيل ، أقترح عليك قراءة مقالة أليكس ماتشنيير "كل ما لم تكن تريد معرفته عن حلقة العنبر" .

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

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

لذلك عندما يحدث إجراء sendMessage ، سنقوم بملء حقل النص والوقت من نموذج الرسائل لدينا ، وإنشاء مثيل جديد له ، ثم دفع ذلك المثيل إلى مجموعة الرسائل الحالية.

عندما نعود إلى المتصفح ، يجب أن نتمكن الآن من إنشاء رسائل جديدة.

Group Chat Creating Messages

لدينا الآن عدة قطع مختلفة قابلة لإعادة الاستخدام من واجهة المستخدم التي يمكننا وضعها في أي مكان. على سبيل المثال ، إذا كنت بحاجة إلى استخدام الصورة الرمزية في مكان آخر في تطبيق Ember ، فيمكننا إعادة استخدام مكون avatar-user.

User Avatars From Twitter and Instagram

التفاف jQuery الإضافات

في هذه المرحلة ، ربما تتساءل "ماذا لو كنت أرغب في استخدام بعض مكونات jQuery في المكون الخاص بي؟" ليس هناك أى مشكلة. للإيجاز ، دعنا نعدّل مكون مستخدم الصورة الرمزية الخاص بنا لعرض تلميح أداة عند التمرير فوق الصورة الرمزية. لقد اخترت استخدام أداة jQuery plugin tooltipsterللتعامل مع تلميح الأدوات. دعونا تعديل التعليمات البرمجية الموجودة لاستخدام tooltipster.

أولاً ، دعنا نضيف الملفات الصحيحة إلى chat.html الخاص بنا وقم بتعديل مكون الصورة الشخصية للمستخدم الحالي.

ثم جافا سكريبت لدينا:

مرة أخرى ، سنرى بناء جملة الإصغاء المعلن ، ولكن لأول مرة نرى هذا . إذا كنت معتادًا على jQuery ، فإنك تتوقع أننا سنستفسر عن جميع العناصر بفئة "avatar". هذا ليس هو الحال في Ember لأنه يتم تطبيق السياق. في حالتنا ، نحن نبحث فقط عن عناصر مع فئة 'avatar' في مكون avatar-user. إنها قابلة للمقارنة مع طريقة البحث عن jQuery. عند تدمير العنصر ، يجب أن نوقف حدث التحويم على الصورة الرمزية ونقوم بتنظيف أي وظيفة ، ويتم ذلك عن طريق تمرير "تدمر" إلى مقدم الطلب. إذا انتقلنا إلى المتصفح ، فحدّثت صورة وتحوم حولها ، يجب أن نرى اسم المستخدم الخاص بالمستخدم.

Avatar Tooltips

استنتاج

في هذا البرنامج التعليمي ، أخذنا غوصًا عميقًا في مكونات Ember وأظهرنا كيف يمكنك أخذ أجزاء من واجهة المستخدم قابلة لإعادة الاستخدام لتوليد مركبات أكبر ودمج ملحقات jQuery. نظرنا في كيفية اختلاف المكونات عن وجهات النظر في Ember. غطينا أيضا فكرة البرمجة القائمة على الواجهة عندما يتعلق الأمر بالمكونات. آمل أن أتمكن من تسليط بعض الضوء ليس على مكونات Ember فقط ولكن على Web Components وحيث تتجه الويب.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.