jQuery Academy · درس

‏jQuery في بيئات الوحدات

تعلّم استيراد jQuery واستخدامها ضمن بيئات ES Modules أو CommonJS، مع ضمان إدارة التبعيات بشكل صحيح في التطبيقات المعيارية.

‏jQuery في بيئات الوحدات درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

مقدمة إلى وحدات JS

مرحبًا بكم! في تطوير JavaScript الحديث، تُعد الوحدات أساسية لتنظيم التعليمات البرمجية. فهي تساعد في إبقاء التعليمات البرمجية مرتبة وتمنع التعارضات.

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

CommonJS: أسلوب require()

‏CommonJS هو نظام وحدات يُستخدم أساسًا في بيئات Node.js. وهو يحدّد كيفية استيراد الوحدات وتصديرها باستخدام require() وmodule.exports.

عند العمل على تعليمات برمجية للواجهة الأمامية، غالبًا ما تُجمّع وحدات CommonJS معًا باستخدام أدوات مثل Webpack أو Browserify، مما يجعلها متوافقة مع المتصفحات.

استيراد jQuery في CommonJS

لاستخدام jQuery في وحدة CommonJS، ستثبّتونها عادةً عبر npm، ثم تستخدمون الدالة require() لإدراجها في ملفكم.

التثبيت: npm install jquery
الاستيراد: const $ = require('jquery');

يُسنِد هذا كائن jQuery إلى المتغير $ المحلي ضمن وحدتكم.

مثال jQuery في CommonJS

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

جرّبوا تشغيلها لرؤية الناتج!

const $ = require('jquery');

$(document).ready(function() {
  $('body').append('<p>Hello from CommonJS jQuery!</p>');
  console.log('CommonJS script executed!');
});

وحدات ES: أسلوب import/export

وحدات ES (وحدات ECMAScript) هي نظام الوحدات الرسمي والموحّد في JavaScript. وهي تستخدم الكلمتين المفتاحيتين import وexport.

أصلية: تدعمها المتصفحات الحديثة وNode.js مباشرةً.
ثابتة: تُحلّ عمليات الاستيراد قبل تنفيذ التعليمات البرمجية.

يوفّر هذا النظام طريقة أنظف وأكثر كفاءة لإدارة التبعيات.

استيراد jQuery في وحدات ES

استخدام jQuery في وحدة ES أمر مباشر. ستستخدمون عبارة import.

التثبيت: npm install jquery
الاستيراد: import $ from 'jquery';

لكي يعمل ذلك، يجب أن تعرض حزمة jQuery نفسها كوحدة ES، وهو ما تفعله الإصدارات الحديثة، أو تتولى أداة التجميع تحويلها.

مثال jQuery في وحدات ES

يوضّح هذا المثال كيفية استيراد jQuery واستخدامها في وحدة ES. لاحظوا صيغة import.

شغّلوا هذه التعليمات البرمجية لرؤية النتيجة!

import $ from 'jquery';

$(document).ready(() => {
  $('body').append('<p>Hello from ES Modules jQuery!</p>');
  console.log('ES Module script executed!');
});

النطاق العام مقابل نطاق الوحدة

عند استيراد jQuery إلى وحدة (سواء كانت CommonJS أو وحدة ES)، يكون المتغيران $ وjQuery عادةً محليين ضمن نطاق تلك الوحدة.

يمنع ذلك jQuery من تلويث الكائن العام window.
ويتجنب التعارضات مع المكتبات الأخرى التي قد تستخدم $ أيضًا.
وتصبح تعليماتكم البرمجية أكثر قابلية للتوقع ومعزولة.

أدوات التجميع: حلقة الوصل بين الوحدات

رغم أن المتصفحات الحديثة تدعم وحدات ES، تؤدي أدوات التجميع مثل Webpack وRollup وParcel دورًا مهمًا عند دمج jQuery:

الحل: تعثر على جميع تبعيات وحداتكم وتضمّنها.
التحويل: تحوّل CommonJS أو JS الأقدم إلى وحدات ES، أو العكس.
التحسين: تصغّر الملفات وتزيل الأجزاء غير المستخدمة وتدمج الملفات لتحسين الأداء.

وتجعل إعدادات الوحدات المعقدة تعمل بسلاسة في المتصفح.

اختبار استيراد الوحدات

لقد تعلّمتم استيراد jQuery في بيئتي CommonJS ووحدات ES. فلنختبر مدى فهمكم!

مراجعة: jQuery في الوحدات

أحسنتم! لقد تعلّمتم كيفية دمج jQuery في بيئات وحدات JavaScript الحديثة.

CommonJS: يستخدم require()، وهو شائع في Node.js وتطبيقات المتصفح المجمّعة.
وحدات ES: تستخدم import، وهو المعيار الأصلي لـ JS الحديث.
الفوائد: تمنع الوحدات تلويث النطاق العام، وتحسّن تنظيم التعليمات البرمجية، وتجعل التبعيات واضحة.
أدوات التجميع: تُعد أدوات مثل Webpack أساسية لحلّ التبعيات وتحسين تطبيقات jQuery القائمة على الوحدات.

يُعد فهم هذه المفاهيم أمرًا بالغ الأهمية لبناء مشاريع واجهة أمامية قابلة للتوسع والصيانة باستخدام jQuery.

الأسئلة الشائعة

هل درس «‏jQuery في بيئات الوحدات» مجاني؟

نعم — نص درس «‏jQuery في بيئات الوحدات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «‏jQuery في بيئات الوحدات»؟

تعلّم استيراد jQuery واستخدامها ضمن بيئات ES Modules أو CommonJS، مع ضمان إدارة التبعيات بشكل صحيح في التطبيقات المعيارية. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «‏jQuery في بيئات الوحدات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy