وداعاً لـ jQuery: دليلك الشامل لتحويل الأكواد إلى Vanilla JS

مقدمة: من jQuery إلى قوة JavaScript الأصلي (Vanilla JS)

في فترة من الفترات، كانت مكتبة jQuery واحدة من أشهر مكتبات JavaScript المتاحة وأكثرها استخداماً. لقد حلت العديد من المشكلات المعقدة التي واجهها المطورون، مثل توحيد التعامل مع التلاعب بنموذج كائن المستند (DOM manipulation) واستدعاءات Ajax عبر مختلف المتصفحات، والتي كانت تتعامل مع JavaScript بطرق مختلفة قليلاً. لقد كان jQuery بمثابة طوق نجاة للمطورين، حيث بسّط العديد من المهام الشاقة.

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

كيفية إعادة كتابة كود jQuery إلى Vanilla JS: مثال عملي

تخيل أن لديك الكود التالي الذي يمثل هيكلاً بسيطاً لصفحة ويب مع قائمة تنقل (navbar) وأقسام مختلفة:

<div class="m1 menu">
  <div id="menu-center">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.menu {
  width: 100%;
  height: 75px;
  background-color: rgba(0, 0, 0, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.light-menu {
  width: 100%;
  height: 75px;
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  background-color: rgba(4, 180, 49, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#menu-center {
  width: 980px;
  height: 75px;
  margin: 0 auto;
}
#menu-center ul {
  margin: 15px 0 0 0;
}
#menu-center ul li {
  list-style: none;
  margin: 0 30px 0 0;
  display: inline;
}
.active {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  line-height: 50px;
}
a {
  font-family: 'Droid Sans', serif;
  font-size: 14px;
  color: black;
  text-decoration: none;
  line-height: 50px;
}
#home {
  background-color: grey;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url(images/home-bg2.png);
}
#portfolio {
  background-image: url(images/portfolio-bg.png);
  height: 100%;
  width: 100%;
}
#about {
  background-color: blue;
  height: 100%;
  width: 100%;
}
#contact {
  background-color: red;
  height: 100%;
  width: 100%;
}

$( document ).ready( function ( ) {
  $( document ).on( "scroll" , onScroll);
  //smoothscroll
  $( 'a[href^="#"]' ).on( 'click' , function ( e ) {
    e.preventDefault();
    $( document ).off( "scroll" );
    $( 'a' ).each( function ( ) {
      $( this ).removeClass( 'active' );
    })
    $( this ).addClass( 'active' );
    var target = this .hash, menu = target;
    $target = $(target);
    $( 'html, body' ).stop().animate({
      'scrollTop' : $target.offset().top+ 2
    }, 500 , 'swing' , function ( ) {
      window .location.hash = target;
      $( document ).on( "scroll" , onScroll);
    });
  });
});

function onScroll ( event ) {
  var scrollPos = $( document ).scrollTop();
  $( '#menu-center a' ).each( function ( ) {
    var currLink = $( this );
    var refElement = $(currLink.attr( "href" ));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $( '#menu-center ul li a' ).removeClass( "active" );
      currLink.addClass( "active" );
    } else {
      currLink.removeClass( "active" );
    }
  });
}

فهم وظيفة التفاعل مع التمرير (onScroll)

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

الوظيفة المسؤولة عن هذا السلوك هي onScroll، والتي تراقب موضع التمرير وتحدث الفئات (classes) للروابط وفقاً لذلك. إليك الكود الأصلي لـ onScroll باستخدام jQuery:

function onScroll ( event ) {
  var scrollPos = $( document ).scrollTop();
  /* console.log(scrollPos); */
  $( '#menu-center a' ).each( function ( ) {
    var currLink = $( this );
    var refElement = $(currLink.attr( "href" ));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
      $( '#menu-center ul li a' ).removeClass( "active" );
      currLink.addClass( "active" );
    } else {
      currLink.removeClass( "active" );
    }
  });
}

خيارات تحويل كود jQuery إلى Vanilla JS

لتحويل وظيفة onScroll من jQuery إلى Vanilla JS، لديك خياران رئيسيان:

الخيار الأول: استخدام محول عبر الإنترنت

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

الخيار الثاني: الترجمة اليدوية للكود (الخيار الأفضل)

الخيار الأفضل والأكثر فعالية هو الترجمة اليدوية للكود. قبل البدء في إعادة كتابة كود jQuery الخاص بك، ننصح بالاطلاع على موارد قيمة مثل You Don’t Need jQuery و You Might Not Need jQuery. ستتمكن من العثور على الإصدارات الأصلية (native JS versions) لأكثر وظائف jQuery شيوعاً، والتي يمكنك استخدام بعضها مباشرة في الكود الخاص بك.

وظيفة onScroll في Vanilla JS

إليك وظيفة onScroll بعد تحويلها إلى Vanilla JS. لاحظ كيف أصبح الكود أكثر نقاءً ولا يعتمد على أي مكتبات خارجية:

function onScroll ( event ) {
  var sections = [...document.querySelectorAll( '#menu-center a' )];
  var scrollPos = window .pageYOffset || document .documentElement.scrollTop || document .body.scrollTop;
  sections.forEach( function ( currLink ) {
    var val = currLink.getAttribute( 'href' );
    var refElement = document .querySelector(val);
    if (refElement.offsetTop <= scrollPos && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
      //document.querySelector('#menu-center ul li a').classList.remove('active');
      currLink.classList.add( 'active' );
    } else {
      currLink.classList.remove( 'active' );
    }
  });
}

document .addEventListener( 'scroll' , onScroll);

في هذا الإصدار من onScroll، تم استبدال استدعاءات jQuery بأساليب Vanilla JS المكافئة. على سبيل المثال، تم استخدام document.querySelectorAll() بدلاً من $() لاختيار العناصر، وتم الوصول إلى موضع التمرير باستخدام window.pageYOffset أو document.documentElement.scrollTop. كما تم استخدام classList.add() و classList.remove() لإدارة الفئات بدلاً من addClass() و removeClass() في jQuery. هذا التحويل يضمن أن الكود يعمل بكفاءة أكبر دون الحاجة لتحميل مكتبة إضافية.

الخلاصة التقنية

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