Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

مقدمة إلى المقاود

by
Difficulty:IntermediateLength:LongLanguages:

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

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


قالب الموقع

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


أساسيات

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

السمة {{name}} حيث سيتم حقن اسم المستخدم في الصفحة. يقابل هذا العنصر النائب مع خاصية في بنية JSON للبيانات. هذا هو أبسط مثال ممكن، ولكن سوف نرى قريبا أن كل شيء أساسا يتلخص هذا المفهوم البسيط. دعونا ننتقل إلى التعامل مع المصفوفات.

صفائف

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

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

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

يمكننا بسهولة عرض هذه المعلومات باستخدام القالب التالي:

يمكنك تخزين القالب الخاص بك في</ script>

في المقاود، يمكنك حتى خصائص الوصول متداخلة، مثل في المثال أعلاه (Albums.0.Name)، وطبعا، يمكن أن تستخدمها آخر each حلقة للتكرار على ألبوم للفرقة. تجدر الإشارة إلى أنه إلى جانب المنقط الوصول إلى خصائص المتداخلة، يمكنك أيضا استخدام "... /"الوصول إلى خصائص أحد الوالدين.

ماذا لو لم تكن هناك أي العصابات اللعب؟ أنت بالتأكيد لا تريد جدول فارغ، ويوفر المقاود والحمد لله if، وelse، وما unless المساعدين. if كان والعمل بيانات else مثل معظم لغات البرمجة: إذا قمت بتمرير الكائن كاذبة أو false، ثم ينفذ بيان else. خلاف ذلك، حالة if تنفيذ البيان. ما unless البيان المثير جداً؛ if كان مقلوب أساسا البيان. إذا كان التعبير true، إلا إذا unless تشغيل كتلة. لذلك دعونا إدماج هذه المساعدين في مدونتنا:

مساعدات مخصصة

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

  • Function Helpers هي الوظائف العادية أساسا، سجلت مرة واحدة، يمكن أن يطلق عليها في أي مكان في القالب الخاص بك. المقاود يكتب القيمة المرجعة للدالة في القالب.
  • Block helpers في طبيعتها if، each، المساعدون إلخ. أنها تسمح لك بتغيير سياق ما بداخله.

اسمحوا لي أن تظهر لك مثال سريع لكل منهما. أولاً، سوف أسجل مساعد دالة مع التعليمات البرمجية التالية:

الوسيطة الأولى التي تم تمريرها إلى ()registerHelper هو اسم بلادي مساعد العملاء؛ سوف تستخدم هذا الاسم في القالب. الوسيطة الثانية هي الدالة المرتبطة بهذا المساعد.

استخدام هذا المساعد في قالب بسيط للغاية:

هذا القالب يستخدم للمساعد Max، وتمرير القيم 12 و 45 إلى الدالة المرتبطة بها. دعم المقاود المساعدين الدالة معلمات متعددة. يمكنك إدراج الأرقام مباشرة في القالب نفسه، أو يمكنك استخدام سمات من بنية JSON.

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

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

والقالب يبدو مثل هذا:

علامة التجزئة قبل اسم مساعد يقول المقاود أن هذا مساعد كتلة، وقمت بإغلاق كتلة لا تختلف عن لك أن علامة HTML. تشغيل الدالة options.fn المقطع قالب داخل الكتلة مع أيا كان السياق الذي تعطيه.

الآن أن لدينا الأساسيات أسفل، دعونا نبدأ إنشاء عرض كامل.


بناء قالب الموقع

لا يمكنك إنشاء موقع مع المقاود.

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

إقامة مشروع المقاود

أننا يجب أولاً تحميل البرنامج النصي قالب لدينا، ولكن من أجل القيام بذلك، نحن بحاجة إلى إنشاء ملف HTML جديد وتشمل مكتبتنا المقاود:

لراحتك، يمكنك تخزين القالب الخاص بك في</ script> هذا أنظف بكثير من تخزينها مباشرة في متغير جافا سكريبت.

الآن دعونا مناقشة كيفية هذا التطبيق هو الذهاب إلى العمل. أولاً، يتصل التطبيق API (أنا باستخدام يوملي) لسحب معلومات عن بعض الوصفات. المقبل، ونحن تمرير هذه المعلومات إلى المقاود وتشغيله من خلال القالب. وأخيراً، نحن استبدال هيئة الفرع مع HTML الذي تم إنشاؤه حديثا. وعملية إلى حد ما مستقيمة؛ ذلك، دعونا نبدأ بإضافة كتلة script ثاني الحق قبل الإغلاق الهيئة body، وإنشاء مثيل متغير Ajax:

إذا تم تغيير بيانات الموقع الخاص بك بشكل منتظم، ثم قد تحتاج إلى إلقاء نظرة على المقاود.

هذه هي التعليمات البرمجية الكاملة لتجميع وتوليد التعليمات البرمجية ل HTML من قالب. من الناحية الفنية يمكن تمرير البيانات JSON من API مباشرة في المقاود، ولكن واجهت عبر المسائل الأصلية. بدلاً من أداء نوعا من الاختراق أو استخدام بي إتش بي في "صدى" البيانات إلى متغير جافا سكريبت، قررت وضع كل ذلك في ملف منفصل:Recipe.php. حتى قبل أن نبدأ في بناء القالب، دعونا الذهاب إلقاء نظرة على هذا الملف PHP.

الحصول على البيانات

API يوملي بسيط جداً. لا يوجد نظام وضع المصادقة؛ يجب عليك التسجيل، والحصول على بعض وثائق التفويض، وإدراجها في عنوان URL. يمكن لك مباشرة صدى البيانات إذا كنت تريد، ولكن أريد معلومات تفصيلية أكثر قليلاً عن كل وصفه. ولذلك، سوف معالجة البيانات من استدعاء API الأولى وتقديم طلب ثان لكل وصفه. هنا هو السيناريو PHP كاملة:

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

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

إرجاع API يوملي قائمة بنكهة البيانات (أي كيف الحلو، الحامض، حار، إلخ.) لكل بند. كتبت مساعد دالة، يسمى getFlavor أن يأخذ هذه المعلومات وتقوم بإرجاع نكهة الأبرز في الطبق. من أجل هذا القالب للعمل، نحن بحاجة إلى تحميل في مساعد getFlavor في المقاود قبل توزيع القالب. حتى في بداية الجزء الثاني من البرنامج النصي، أضف التعليمات البرمجية التالية قبل التعليمة البرمجية أياكس:

الآن، كلما يرى المقاود getFlavor، فإنه يستدعي الدالة المرتبطة بها واسترداد معلومات نكهة.

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


ما قبل التحويل البرمجي

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

يؤدي هذا أيضا في حجم ملف أصغر، ولكن هذا لا يساعد حقاً في السيناريو لدينا.

أن مشكلتنا هي الاتصال بين المستعرض وال API. إذا تريد إعادة التحويل البرمجي القالب الخاص بك، يمكنك تنزيل حزمة Node.js من خلال متحف npm القصر الوطني مع الأمر التالي:

قد تحتاج إلى القيام بذلك كجذر (أي إضافة 'sudo' قبل الأمر). بمجرد تثبيته، يمكنك إنشاء ملف للقالب الخاص بك وترجمة ذلك كالتالي:

وينبغي إعطاء ملف القالب الخاص بك ملحق.handlebars. وهذا ليس إلزامياً، ولكن إذا كنت تسميته شيئا مثل demo.html، ثم سيكون اسم القالب "demo.html" كما الرئيسي يعارضها إلى مجرد "تجريبي". بعد تسمية القالب الخاص بك، ببساطة تضمين ملف الإخراج جنبا إلى جنب مع إصدار وقت التشغيل من المقاود (يمكنك استخدام النسخة العادية، لكنه يملك أكبر) واكتب ما يلي:

ما unless هو بيان.. أساسا if كان مقلوب البيان.

ولكن، وكما ذكرت من قبل، وهذا لا يساعد حقاً لنا في هذا السيناريو. ثم ماذا يمكن أن نفعل؟ حسنا، أننا ما قبل التحويل البرمجي وإخراج الملف بأكمله. وهذا يجعل من حيث أنه يمكننا تشغيل القالب مع البيانات وحفظ HTML النهائي الإخراج-التخزين المؤقت، وبعبارة أخرى. جذريا وهذا يسرع وقت تحميل التطبيق الخاص بك. ولسوء الحظ، جافا سكريبت العميل لا يملك قدرات إدخال/إخراج الملف. فهو أسهل طريقة لتحقيق ذلك مجرد إخراج HTML لمربع نص وحفظه يدوياً. كن على علم من API للمبادئ التوجيهية المتعلقة بالتخزين المؤقت. وقد معظم واجهات برمجة التطبيقات الحد أقصى لمقدار الوقت الذي يمكن أن يكون مؤقتاً البيانات؛ تأكد من العثور على تلك المعلومات قبل حفظ صفحات ثابتة.


الاستنتاج

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

Advertisement
Advertisement
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.