لم أعمل مطلقًا كمطور أمامي محترف ، وعلى الرغم من أنني كنت أكتب HTML / CSS / JS لمشاريع جانبية صغيرة لمدة 15 عامًا ، إلا أن جميع المشاريع كانت صغيرة جدًا. يحدث أنني لم أكتب في جافا سكريبت لسنوات بين هذه المشاريع ، وغالبًا ما لست متأكدًا مما إذا كنت أفعل كل شيء بشكل صحيح.



هذا هو السبب في أنني استخدمت المكتبات في كثير من الأحيان! منذ عشر سنوات ، استخدمت jQuery ، ومنذ عام 2017 ، كنت أستخدم vue.js كثيرًا لمشاريعي الصغيرة (يمكنك التحقق من لعبة أختها الصغيرة كمقدمة لـ Vue).



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

تجربة جافا سكريبت عادي

أحب Vue حقًا. ولكن في الأسبوع الماضي عندما بدأت في تطوير https://questions.wizardzines.com ، كان لدي قيود مختلفة قليلاً عن المعتاد - كنت أرغب في استخدام نفس HTML لإنشاء ملف PDF (مع Prince ) وإنشاء نسخة تفاعلية الأسئلة.



لم أفهم حقًا كيف يكون هذا ممكنًا مع Vue (لأن Vue يريد إنشاء كل HTML نفسه) ، وبما أنه كان مشروعًا صغيرًا ، فقد قررت أن أحاول كتابته بتنسيق Javascript بدون مكتبات - فقط اكتب بعض HTML / CSS وأضف واحدة <script src="js/script.js"> </script>.



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

نفعل كل شيء تقريبًا عن طريق إضافة فئات CSS وإزالتها

قررت تنفيذ كل واجهة المستخدم تقريبًا بمجرد إضافة فئات CSS وإزالتها واستخدام انتقالات CSS إذا كنت أرغب في تنشيط الانتقال.



فيما يلي مثال صغير حيث يؤدي النقر فوق زر nextلسؤال إلى إضافة فصل دراسي doneإلى div الأصل.

div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}

عملت بشكل جيد. CSS الخاص بي ، كما هو الحال دائمًا ، فوضوي قليلاً ، ولكن يبدو أنه يمكن التحكم فيه.

إضافة / إزالة فئات CSS باستخدام .classList

لقد بدأت مع الطبقات تحريرها على النحو التالي: x.className = 'new list of classes'. إنه فوضوي قليلاً وتساءلت عما إذا كانت هناك طريقة أفضل. و هو كان!



يمكن إضافة فئات CSS على النحو التالي:

let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');

element.classList.remove('hi') أنظف بكثير من طريقي السابق.

ابحث عن العناصر باستخدام document.querySelectorAll

عندما بدأت في تعلم jQuery ، أتذكر أنني اعتقدت أنه إذا كنت بحاجة إلى العثور بسهولة على شيء ما في DOM ، فأنت بحاجة إلى استخدام jQuery (على سبيل المثال $('.class')). لقد علمت للتو هذا الأسبوع أنه يمكنك الكتابة بدلاً من ذلك document.querySelectorAll('.some-class')، ومن ثم لا يتعين عليك الاعتماد على أي مكتبة!



لقد شعرت بالفضول عندما تم تقديمه querySelectorAll. لقد بحثت في Google قليلاً ويبدو أنه تم إنشاء Selectors API في وقت ما بين عامي 2008 و 2013 - لقد وجدت منشورًا من مؤلف jQuery يناقش التنفيذ المقترح في عام 2008 ، ونشر مدونة من عام 2011 تقول أن كان في جميع المتصفحات الرئيسية في وقت واحد ، لذلك ربما لم يكن موجودًا عندما بدأت في استخدام jQuery ، ولكن من المؤكد أنه كان موجودًا لبعض الوقت :)

قم بتثبيت .innerHTML

في مكان واحد ، أردت تغيير محتوى HTML للزر. يعد إنشاء عناصر DOM document.createElementأمرًا شاقًا إلى حد ما ، لذلك حاولت تصغير العمل وقمت بدلاً من ذلك بتعيين .innerHTMLسلسلة HTML للسلسلة الصحيحة:

  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;

تمرير الصفحة باستخدام .scrollIntoView

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

row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});

مثال آخر على الفانيليا شبيبة: peekobot

مثال صغير آخر على مكتبة JS البسيطة التي وجدتها جيدة هو peekobot ، وهي واجهة chatbot صغيرة من 100 سطر من JS / CSS.



كما ترون من Javascript ، يستخدم العديد من الأنماط المتشابهة - كثيرًا .classList.add، بعض العناصر المضافة إلى DOM ، بعضها .querySelectorAll.



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

جافا سكريبت بسيطة يمكن أن تفعل الكثير!

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



كالعادة مع مشاركاتي الأمامية ، لا يجب أن تكون هذه نصيحة تطوير أمامية جادة. هدفي هو كتابة مواقع ويب صغيرة بها أقل من 200 سطر من جافا سكريبت تعمل في الغالب. إذا كنت أيضًا في العالم الأمامي ، آمل أن يساعد هذا قليلاً!