دليلك الشامل: الانتقال من jQuery إلى Vanilla JavaScript في مشاريع Bootstrap 5

6 min read Aldawsari
دقائق القراءة: 6

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

بالإضافة إلى ذلك، توقفت Bootstrap 5 عن دعم متصفحات Internet Explorer 9 و 10، وقدمت تحديثات رائعة لملفات Sass، وتحسينات في بنية الترميز (markup)، بالإضافة إلى واجهة برمجة تطبيقات جديدة للمرافق (Utility API). يهدف هذا الدليل إلى إرشادك خطوة بخطوة حول كيفية البدء في استخدام Vanilla JavaScript بدلاً من jQuery عند بناء مواقع الويب باستخدام أحدث إصدار من Bootstrap 5، مما يضمن لك تجربة تطوير أكثر كفاءة وسرعة.

البدء في العمل مع Bootstrap 5 و Vanilla JS

للبدء في الاستفادة من ميزات Bootstrap 5، ستحتاج إلى تضمينه في مشروعك. هناك عدة طرق للقيام بذلك، ولكن لتبسيط العملية، سنقوم بتضمين إطار العمل عبر شبكة توصيل المحتوى (CDN). لنبدأ بإنشاء صفحة index.html فارغة داخل مجلد مشروعك:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>
</head>
<body>
</body>
</html>

إضافة ملفات Bootstrap 5 الأساسية

بعد ذلك، قم بتضمين ورقة الأنماط bootstrap.min.css قبل وسم الإغلاق لـ </head> في صفحتك:


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

ثم، قم بتضمين مكتبة Popper.js وملف JavaScript الرئيسي لـ Bootstrap قبل وسم الإغلاق لـ </body>:


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

فهم سمات Integrity و Crossorigin

ربما تتساءل عن معنى السمتين integrity و crossorigin. إليك شرح مبسط لهما:

  • سمة integrity: تسمح للمتصفح بالتحقق من مصدر الملف للتأكد من أن الكود لا يتم تحميله أبدًا إذا تم التلاعب بالمصدر. هذا يوفر طبقة أمان إضافية ضد هجمات حقن المحتوى (Content Injection Attacks).
  • سمة crossorigin: تكون موجودة عندما يتم تحميل طلب باستخدام 'CORS' (Cross-Origin Resource Sharing)، وهو الآن متطلب للتحقق من SRI (Subresource Integrity) عندما لا يتم تحميل المورد من نفس المصدر ('same-origin').

رائع! لقد قمنا الآن بتضمين أحدث إصدار من Bootstrap بنجاح في مشروعنا. أحد الاختلافات الواضحة هو أننا لم نعد بحاجة إلى jQuery كاعتمادية، مما يوفر حوالي 82.54 كيلوبايت من عرض النطاق الترددي إذا كان الملف مضغوطًا (minified).

الانتقال السلس من jQuery إلى Vanilla JavaScript

قبل أن نبدأ في هذا القسم، يجب أن تعلم أن استخدام Bootstrap 5 مع jQuery لا يزال ممكنًا وفقًا للوثائق الرسمية. ومع ذلك، نوصي بشدة باستخدام Vanilla JavaScript إذا كان السبب الوحيد لاستخدامك لـ jQuery هو محدد الاستعلام (query selector). يمكنك تحقيق نفس النتيجة باستخدام document.querySelector('#element') كما لو كنت تستخدم $('#element').

الخطوة الأولى هي إنشاء ملف JavaScript خاص بك وتضمينه قبل وسم الإغلاق لـ </body>، ولكن بعد تضمين ملفي JavaScript الآخرين لـ Bootstrap و Popper.js:


<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="js/app.js"></script>

متى تحتاج إلى استخدام JavaScript مع Bootstrap 5؟

متى ستحتاج فعليًا إلى استخدام JavaScript مع Bootstrap 5؟ هناك بعض المكونات في إطار العمل لا تعمل إلا إذا تم تهيئتها عبر JavaScript، مثل التلميحات (tooltips)، والنوافذ المنبثقة (popovers)، والإشعارات (toasts). علاوة على ذلك، مع مكونات مثل النماذج المشروطة (modals)، والقوائم المنسدلة (dropdowns)، وعناصر التمرير (carousels)، قد ترغب في أن تكون قادرًا على تغييرها برمجيًا بناءً على إجراء المستخدم أو منطق التطبيق.

تهيئة التلميحات (Tooltips) باستخدام Vanilla JavaScript

نحن جميعًا نحب التلميحات (tooltips)، ولكنها لا تعمل إلا إذا تم تهيئتها عبر JavaScript. لنبدأ أولاً بإنشاء عنصر تلميح داخل ملف index.html الخاص بنا:


<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button>

التحويم فوق الزر لن يظهر التلميح، لأنه بشكل افتراضي ميزة اختيارية في Bootstrap وتحتاج إلى تهيئتها يدويًا باستخدام JavaScript. إذا كنت ترغب في القيام بذلك باستخدام jQuery، فسيبدو الكود كالتالي:


$( '#tooltip' ).tooltip();

باستخدام Vanilla JS، ستحتاج إلى استخدام الكود التالي لتمكين التلميح:


var tooltipElement = document.getElementById( 'tooltip' );
var tooltip = new bootstrap.Tooltip(tooltipElement);

ما يفعله الكود أعلاه هو أنه يختار العنصر الذي يحمل المعرف الفريد "tooltip" ثم يقوم بإنشاء كائن تلميح (tooltip object) من Bootstrap. يمكنك بعد ذلك استخدام هذا الكائن للتحكم في حالة التلميح، مثل إظهاره أو إخفائه برمجيًا. إليك مثال على كيفية إظهاره/إخفائه باستخدام الدوال (methods):


var showTooltip = true;
if (showTooltip) {
    tooltip.show();
} else {
    tooltip.hide();
}

إذا كنت ترغب في تمكين جميع التلميحات، يمكنك أيضًا استخدام الكود التالي:


var tooltipTriggerList = [].slice.call( document.querySelectorAll( '[data-toggle="tooltip"]' ));
var tooltipList = tooltipTriggerList.map( function ( tooltipTriggerEl ) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
});

ما يحدث هنا هو أننا نختار جميع العناصر التي تحتوي على السمة والقيمة data-toggle="tooltip" ونقوم بتهيئة كائن تلميح لكل منها. كما يتم حفظها في متغير tooltipList.

التحكم في رؤية العناصر باستخدام وظائف Collapse في JavaScript

ميزة الطي (collapse) في Bootstrap هي طريقة أخرى مفيدة جدًا لإظهار وإخفاء العناصر عبر السمات البيانات (data attributes) أو JavaScript. إليك مثال على كيفية إظهار أو إخفاء بطاقة (card) عند النقر على زر معين. لنقم أولاً بإنشاء الترميز HTML:


<button id="toggleCardButton" type="button" class="btn btn-primary mb-2"> Toggle Card </button>
<div id="card" class="card collapse show" style="width: 18rem;">
    <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="بطاقة عرض لموقع Freecodecamp.org التعليمي توضح كيفية استخدام ميزة Collapse في Bootstrap 5">
    <div class="card-body">
        <h5 class="card-title">Freecodecamp.org</h5>
        <p class="card-text">Awesome resource to learn programming from.</p>
        <a href="#" class="btn btn-primary"> Learn coding for free </a>
    </div>
</div>

بطاقة عرض لموقع Freecodecamp.org التعليمي توضح كيفية استخدام ميزة Collapse في Bootstrap 5

لقد أنشأنا زرًا بمعرف id هو toggleCardButton وبطاقة بمعرف id هو card. لنبدأ باختيار العنصرين:


var toggleButton = document.getElementById( 'toggleCardButton' );
var card = document.getElementById( 'card' );

ثم نحتاج إلى إنشاء كائن قابل للطي (collapsable object) باستخدام عنصر البطاقة الذي تم اختياره حديثًا:


var collapsableCard = new bootstrap.Collapse(card, {
    toggle : false
});

ما يفعله العلم toggle:false هو أنه يحافظ على العنصر مرئيًا بعد إنشاء الكائن. إذا لم يكن موجودًا، فسيتم إخفاء البطاقة افتراضيًا. الآن نحتاج إلى إضافة مستمع حدث (event listener) للزر لعملية النقر (click action):


toggleButton.addEventListener( 'click' , function ( ) {
    // do something when the button is being clicked
});

وأخيرًا، نحتاج إلى تبديل حالة البطاقة (إظهار/إخفاء) باستخدام الكائن القابل للطي الذي قمنا بتهيئته على النحو التالي:


toggleButton.addEventListener( 'click' , function ( ) {
    collapsableCard.toggle();
});

هذا كل شيء! الآن سيتم إظهار/إخفاء البطاقة كلما تم النقر على الزر. بالطبع، كان من الممكن القيام بكل هذا باستخدام ميزة سمات البيانات (data attributes) من Bootstrap، ولكن قد ترغب في تبديل عناصر معينة بناءً على استدعاء API أو منطق في تطبيقك.

الخلاصة

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

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

يمثل انتقال Bootstrap 5 من jQuery إلى Vanilla JavaScript خطوة استراتيجية حاسمة تعكس التطور المستمر في معايير تطوير الويب الحديثة. هذا التحول لا يقتصر فقط على تحسين الأداء وتقليل حجم الملفات، بل يعزز أيضًا قابلية الصيانة ويقلل من تعقيد المشروع من خلال التخلص من تبعية خارجية. باستخدام Vanilla JS، يكتسب المطورون تحكمًا أكبر في الكود، مما يفتح آفاقًا أوسع لتحسين تجربة المستخدم وسرعة تحميل الصفحات. هذا النهج يتماشى تمامًا مع أفضل ممارسات SEO ومعايير Google AdSense التي تفضل المواقع السريعة والخفيفة. إن تبني Vanilla JS مع Bootstrap 5 ليس مجرد خيار تقني، بل هو استثمار في مستقبل تطبيقات الويب التي تتطلب الكفاءة والمرونة.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *