كيفية التحويل من jQuery إلى JavaScript – وماهي الفوائد الناتجة

التحويل من jQuery إلى JavaScript يوفر لك كـ مالك موقع أو مطور مواقع مزايا عديدة، إلى جانب إزالة الـ Dead Code أو بمعنى آخر الكود الضعيف أو الميت. يمكنك أيضاً زيادة سرعة موقعك والذي يُعد عامل اساسيي لتحسين محركات البحث.

تُعد مكتبة jQuery وتوابعها من أفضل المكاتب لتطوير المواقع، وبكل السُبل يمكنك استخدامهم إذا كان الغرض هو فقط بناء موقع الكتروني.

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

على أقل تقدير، تأكد من أنك تعرف ما تفعله مكتبة jQuery وما الذي لا تفعله.

{setMore}

يعتقد بعض المطورين أن jQuery يحمينا من وحش كبير في مخيلتنا جميعاً يتعلق بهوس عدم توافق المتصفح مع الكود البرمجي الخاص بي. في حين أن الحقيقة بعد تحديث Internet Explorer 8، أصبحت كل المتصفحات متوافقة مع جميع تقنيات وبدائل الأكواد البرمجية التي قد تستخدمها.

كيفية التحويل من jQuery إلى JavaScript

هل قمت بالانتقال من Jquery الى Pure JavaScript والتى يطلق عليها Vanilla JS – فانيلا جافاسكربت، إن كان جوابك نعم فبكل تأكيد لن تكون هنا تقرأ عن طريقة تحويل الجيكوري إلى جافاسكربت.

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

كدت استغرق اكثر من اسبوع على أمل أن أجد "محول jQuery إلى JavaScript" عبر البحث عنها في جوجل ولكننى أدركت أن عَلّي تحويل الكود بطريقة يدوية.

لذلك، إذا كنت تريد حقاً زيادة سرعة الموقع الخاص بك وتحسين محركات البحث فعليك القيام بتحويل من اكواد Jquery إلى أكواد JavaScript.

تحسين محركات البحث من خلال Vanilla JavaScript

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

أفضل استخدام مقياس اختبار السرعة من Web.Dev أو مقياس اختبار السرعة من Google. الموقعين يُظهران لك تقرير تفصيلي عن جميع مشاكل موقعك وبما في ذلك سرعة تحميل موقعك.

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

اختبار سرعة موقع يستخدم jQuery

ضمن الموارد التي يتم تحميلها ستجد ايضاً ملفات jQuery. وفي الغالب لا يتعدى حجم الملف عن 20 كيلوبايت بعد الضغط إلا أنه قد يقوم بإبطاء موقعك بنسبة تصل إلى 60%.

اختبار سرعة موقع يستخدم jQuery

لا تسئ فهمي، أنا حب jQuery فهي حقاً مكتبة عظيمة وتعطي من يتقنها امكانية لفعل أي شئ يريد، وقد قمت بالفعل بإستخدامها في كثير من البرمجيات وأعددت بها اعمال عظيمة، ولكن يجب عليّ الاعتماد على Vanilla JS أكثر من أجل تحسين محركات البحث في موقعي.

إزالة الكود الميت أو الضعيف

إذا قمت بكتابة أكواد jQuery بالفعل داخل موقعك، فيمكنك استغلال الفرصة لإزالة العلامات البرمجية الغير ضرورية أو القديمة.

لهذا قمت بعمل قائمة بجميع الوظائف التي قد تحتاجها في موقعك باستخدام مكتبة jQuery واستبدالها بأكواد Vanilla JS وفي هذه الحالة قد تواجه بعض الأخطاء البرمجية التي قد اقترفتها في حق موقعك ويمكنك إزالتها إن لم تعد مطلوبة.

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

تحويل كود jQuery

يمكنك الاستعانة بموقع youmightnotneedjquery.com وسيكون مفيد بشكل خاص للانتقال إلى Vanilla JS.

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

تنفيذ أمر أثناء تحميل الصفحة

يتم تنفيذ الأمر أثناء تحميل الموقع بإستخدام Document Ready Function، فبالتالي قد يستغرق كود jQuery ثلاث أضعاف كود JavaScript. ويفضل في هذه الحالة استخدام أكواد JavaScript والتي بدورها لن تعيق تحميل الصفحة.

// كود جيكوري
$(function() {
  /* التابع المنفذ */
});

// كود فانيلا جافاسكربت
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
ready(() => {
  /* التابع المنفذ */
});

اختيار احد عناصر الموقع

هناك اختلاف كبير عن اختيار احد العناصر باستخدام Pure Javascript يجب عليك إنشاء حلقة JS loop إذا كنت تريد اختيار عناصر متعددة، ولكن في jQuery يمكنك تسجيل حدث بإستخدام مُحدِّد ويتم التطبيق على جميع العناصر المُختاره.

// كود جيكوري
// عدة عناصر
let buttons = $('button.red-btn');
// عنصر واحد فقط
let button = $('button.green-btn');

// كود فانيلا جافاسكربت
// عدة عناصر
let buttons = document.querySelectorAll('button.red-btn');
// عنصر واحد فقط
let button = document.querySelector('button.green-btn');

مع parentNode تحصل على العنصر الأصلي، يمكن ايضاً الجمع بين العناصر الأصلية، مثال parentNode.parentNode

// كود جيكوري
let foobarParent = $('#foobar-container').parent();
// كود فانيلا جافاسكربت
let foobarParent = document.querySelector('#foobar-container').parentNode;

التعامل مع الحدث

للتعامل مع الحدث عليك البحث عن العنصر إن كان واحداً أو أكثر، بينما في jQuery لا يهم ذلك التحديد فـ جيكوري تقوم بتسجيل الحدث على أي حال، وهذا مثال باستخدام jQuery و JavaScript.

// كود جيكوري
$('.link').click(function() {
  /* التابع المنفذ */
});

// كود فانيلا جافاسكربت
// عنصر واحد فقط
document.querySelector('#link').addEventListener('click', event => {
  /* التابع المنفذ */
});
// عدة عناصر
document.querySelectorAll('.link').forEach(link => {
  link.addEventListener('click', event => {
    /* التابع المنفذ */
  });
});

ملحوظة: لإلغاء حدث فإن وظيفة رد الحدث(callback) مهمة جداً في Vanilla JavaScript ولذلك إذا قمت بتسجيل حدث سيتوجب عليك إنشاؤه في وظيفة رد اتصال(callback function) منفصلة.

// الغاء حدث باستخدام جيكوري
$('#foobar').off('click');

// الغاء حدث باستخدام فانيلا جافاسكربت
document.getElementById('foobar').removeEventListener('click', clickEvent);
function clickEvent(event) { }

تطبيق إجراء على العناصر

باستخدام jQuery تستطيع بكل سهولة تطبيق show() أو hide()، ولكن في JavaScript يتم التطبيق عن طريق اضافة خواص CSS.

// كود جيكوري
$('.foobar').show();

// كود فانيلا جافاسكربت
document.querySelectorAll('.foobar').forEach(element => {
  element.style.display = 'block';
});

// كود جيكوري
$('.foobar').hide();

// كود فانيلا جافاسكربت
document.querySelectorAll('.foobar').forEach(element => {
  element.style.display = 'none';
});

الاستعلام عن سمات العناصر وتغييرها

يعد استخدام الاستعلامات عن العناصر والتغيير فيها بنفس سهولة استخدام jQuery. فقط طريقة كتابة الكود مختلفة قليلاً. وفي الأمثلة القادمة طرق تمكنك من إنشاء فئة لتغيير العناصر toggleClass() بكل سهولة.

// كود جيكوري
if($('.foo').hasClass('bar')) {
  /* التابع المنفذ */
}

// كود فانيلا جافاسكربت
if(document.querySelector('.foo').classList.contains('bar')) {
  /* التابع المنفذ */
}

// كود جيكوري
$('.foo').addClass('bar');

// كود فانيلا جافاسكربت
document.querySelector('.foo').classList.add('bar');

// كود جيكوري
$('.foo').removeClass('bar');

// كود فانيلا جافاسكربت
document.querySelector('.foo').classList.remove('bar');

الاستعلام عن بعض السمات الاخرى يعد متشابه تماماً بين jQuery و JavaScript ألا إنه في بعض الأحيان يكون الإخراج(output) مختلفاً.

// كود جيكوري
console.log($('.foobar').attr('checked')); // الإخراج: checked/undefined

// كود فانيلا جافاسكربت
console.log(document.querySelector('.foobar').checked); // الإخراج: true/false

// كود جيكوري
$('.foobar').html();
$('.foobar').html('Hello world!');

// كود فانيلا جافاسكربت
document.querySelector('.foobar').innerHTML;
document.querySelector('.foobar').innerHTML = 'Hello world!';

تحديد التعويضات والأبعاد

// كود جيكوري
let offset = $(window).scrollTop();

// كود فانيلا جافاسكربت
let offset = window.pageYOffset;

// كود جيكوري
$(window).width();

// كود فانيلا جافاسكربت
parseFloat(getComputedStyle(document.querySelector('html'), null).width.replace("px", ""));

// كود جيكوري
$('.foobar').width();

// كود فانيلا جافاسكربت
document.querySelector('.foobar').offsetWidth;

// كود جيكوري
$('.foobar').offset().top;

// كود فانيلا جافاسكربت
document.querySelector('.foobar').offsetTop;

إضافة أنماط للعناصر

تتيح لك JavaScript جودة عالية لإضافة الأنماط باستخدام تقنية Camel Case والتي ينتج عنها فهم الأمر لتنفيذ النمط دون الحاجة لكتابته بالشكل المتوقع مثال justify-content تصبح justifyContent.

// كود جيكوري
$('.foobar').css('display', 'flex');
$('.foobar').css('margin-top', '3rem');
let displayProperty = $('.foobar').css('display');

// كود فانيلا جافاسكربت
document.querySelector('.foobar').style.display = 'flex';
document.querySelector('.foobar').style.marginTop = '3rem';
let element = document.querySelector('.foobar');
let elementStyle = getComputedStyle(element, null);
let displayProperty = elementStyle.display;

إضافة عناصر جديدة

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

// كود جيكوري
$('.foo').append('
bar
');

// كود فانيلا جافاسكربت
let bar = document.createElement('p');
bar.classList.add('child');
bar.id = 'child-id';
bar.innerHTML = 'bar';
document.querySelector('.foo').appendChild(bar);

// اضافة عنصر سكربت للعنصر جسم باستخدام فانيلا جافاسكربت
// من أكثر الأشياء التي يبحث عنها المطورين
let t = document.createElement('script');
t.type = 'text/javascript';
t.src = 'js/file/path';
document.querySelector('body').appendChild(t);

وهذا كان تحويل jQuery إلى JavaScript وهذه معظم الميزات التي تحتاجها.

هل الأمر يستحق العناء؟

من وجهة نظري، بالطبع نعم. بغض النظر عن أنه عندما يتم اعادة كتابة الكود باستخدام Vanilla JavaScript قد تجد بعض الأكواد التي لا حاجة لها وسيكون من الواجب ازالتها أو استبدالها بكود برمجي نظيف يتم تحميله بسرعة اكثر ثلاث مرات.

ما هي تجربتك التي أتممتها باستخدام jQuery، وهل انت مستعد للانتقال لـ JavaScript أم أنت سعيد بإستخدام jQuery؟
متشوق لسماع أرائكم وهل كان المقال مفيد بالنسبة لك؟