الفانيلا جافا سكريبت و HTML. لا أطر. لا توجد مكتبات. لا مشكلة

هل تستخدم Vue أو React أو Angular أو Svelte لإنشاء تطبيقات؟ أستخدمها ، وإذا كنت أنت أيضًا ، وأنا متأكد من أنك لم تضطر إلى كتابة تطبيق يعرض معلومات دون هذه الأدوات الرائعة.

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

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

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

لنلقِ نظرة على طرق مختلفة لعرض المعلومات. والحفاظ على هذه الوثائق في متناول يدي!

تطبيق نموذج

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

الأدوات

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

سنستخدم فقط HTML و TypeScript / JavaScript و CSS و DOM المستندة إلى المستعرض (طراز كائن المستند). دعونا نرى كيف يمكن عرض HTML.

هنا يمكنك أن تقرأ عن كيفية كتابة TypeScript باستخدام كود VS.

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

النهج

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

شريط التقدم العرض

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

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

عرض المؤشر باستخدام HTML الداخلي

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

 const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^ ></progress> `; 

فقط. بسهولة. لماذا لا يمكن قول ذلك عن أي كود؟ انظر جيدا كيف سريع هذه القطعة يحل المشكلة!

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

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

innerHTML أخير: يمكن أن يؤثر innerHTML على سرعة العرض. لست حريصًا على الإفراط في التحسين ، ولكن تحقق من الأداء بشكل أفضل ، لأن innerHTML يمكن أن يتسبب في دورات العرض والتخطيط في المتصفح. ضع في اعتبارك

شريط التقدم باستخدام DOM API

يمكنك تقليل ضخامة الخطوط الطويلة باستخدام DOM API. نقوم بإنشاء عنصر ، وإضافة الفئات والسمات اللازمة ، وتعيين القيم ، ثم إضافتها إلى DOM.

 const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

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

والعيب هو أن الأمر يتطلب ستة أسطر من التعليمات البرمجية لإخراج المعلومات التي يتم عرضها كسطر واحد باستخدام innerHTML .

هل رمز DOM API لعرض المؤشر أكثر قابلية للقراءة من الرمز باستخدام innerHTML ؟ أود القول. ولكن هذا ليس السبب في أن كود HTML للمؤشر قصير وبسيط للغاية؟ ربما. إذا كان هناك 20 سطرًا ، فسيصبح من innerHTML جدًا قراءة النص innerHTML ... ومع ذلك ، فإن كود DOM API أيضًا.

رسم مؤشر باستخدام القوالب

هناك طريقة أخرى لإنشاء علامة <tmplate> واستخدامها لتبسيط إخراج المعلومات.

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

 <template id="progress-template"> <progress class="hero-list progress is-medium is-info" max=^_^quotdquot^_^></progress> </template> 

يمكن للرمز أن يأخذ القالب باستخدام طريقة document.importNode() من DOM API. حسب الحاجة ، يمكن للكود معالجة محتويات القالب. أضف الآن هذا المحتوى إلى DOM لعرض المؤشر.

 const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

القوالب هي وسيلة جيدة لبناء HTML. يعجبني لأنه يتيح لك كتابة HTML حيثما يكون ذلك منطقيًا ، ويمكنك أن تفعل أقل باستخدام كود TypeScript / JavaScript.

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

عرض قائمة الأحرف

الآن دعنا نتحدث عن كيف يمكنك عرض قائمة من الشخصيات باستخدام نفس التقنيات الثلاثة. الفرق من تقديم عنصر HTML <prgress> واحد وقائمة من الشخصيات هو أننا الآن:

• عرض عدة عناصر HTML ؛
  
• إضافة عدة فصول ؛
  
• أضف سلسلة معينة من الأطفال ؛
  
• عرض لكل شخصية الكثير من نفس المعلومات ؛
  
• عرض ديناميكي النص داخل العناصر.
  

عرض الحروف باستخدام HTML الداخلي

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

 function createListWithInnerHTML(heroes: Hero[]) { const rows = heroes.map(hero => { return `<li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name">${hero.name}</div> <div class="description">${hero.description}</div> </div> </div> </div> </li>`; }); const html = `<ul>${rows.join('')}</ul>`; heroPlaceholder.innerHTML = html; 

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

تعيين الأحرف باستخدام DOM API

 function createListWithDOMAPI(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero => { const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); }); heroPlaceholder.replaceWith(ul); } 

عرض الأحرف مع قوالب

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

 <template id="hero-template"> <li> <div class="card"> <div class="card-content"> <div class="content"> <div class="name"></div> <div class="description"></div> </div> </div> </div> </li> </template> 

الآن يمكنك كتابة التعليمات البرمجية لإنشاء قائمة الأحرف. أولاً ، قم بإنشاء ul لف السطور ذات الأحرف li . يمكنك الآن الاطلاع على الصفيف واستخدام نفس الأسلوب document.importNode() لتطبيق نفس القالب على كل حرف. لاحظ أنه يمكن إعادة استخدام النموذج لإنشاء كل صف. يتحول إلى رسم مصدر ، مما يخلق العدد المطلوب من الخطوط.

يجب أن تحتوي قائمة الأحرف على أسماء وأوصاف. وهذا يعني أنه سيكون من الضروري استبدال قيم محددة داخل القالب. للقيام بذلك ، يُنصح بتحديد الأماكن التي ستدخل فيها هذه القيم والرجوع إليها بطريقة أو بأخرى. في مثالنا ، للحصول على رابط لكل حرف ، نستخدم طريقة querySelector('your-selector') ، وبعد ذلك نعطي اسمًا ووصفًا.

 function createListWithTemplate(heroes: Hero[]) { const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) => { const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); }); heroPlaceholder.replaceWith(ul); } 

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

النتائج

لم أذكر كيف تعرض الأطر والمكتبات الشعبية المعلومات. تجعل Vue و React و Angular و Svelte المهمة أسهل كثيرًا وتتطلب كودًا أقل للكتابة. لديهم أيضا مزايا أخرى. في هذه المقالة ، درسنا التقنيات البسيطة نسبياً لعرض المعلومات باستخدام DOM و HTML الخالص ، وكذلك TypeScript / JavaScript.

ماذا وصلنا؟

آمل أن تتمكن الآن من تصور كيفية عرض المعلومات دون استخدام المكتبات. هل هناك أي طرق أخرى؟ بالطبع هل يمكنني كتابة الوظائف التي تبسط الكود وتسمح باستخدامه بشكل متكرر؟ بالطبع ولكن في يوم من الأيام سترغب في تجربة إحدى الأدوات الرائعة مثل Vue أو React أو Angular أو Svelte.

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

من الجيد أن تعرف ما يمكنك القيام به باستخدام HTML الخالص و TypeScript / JavaScript و CSS ، حتى لو كنت تستخدم إطارًا يوفر لك كل ذلك.

بغض النظر عن تجربتك ، آمل أن تكون هذه الرحلة القصيرة في بعض التقنيات لعرض المعلومات مفيدة لك.