jQuery Academy · درس

التعايش مع صياغة ES6+

افهم كيفية كتابة شيفرة jQuery إلى جانب ميزات JavaScript الحديثة مثل الدوال السهمية وconst/let والقوالب النصية دون تعارضات.

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

jQuery وJavaScript الحديثة

مرحبًا بك في درس حول دمج jQuery مع JavaScript الحديثة من ES6 وما بعده! ستتعلّم كيفية الجمع بين نقاط قوتهما لكتابة شيفرة نظيفة وفعالة وسهلة الصيانة.

لماذا JavaScript الحديثة؟

يقدم ES6+ (ECMAScript 2015 والإصدارات الأحدث) ميزات قوية مثل const وlet والدوال السهمية والقوالب النصية.

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

المتغيران `const` و`let`

بدلًا من var، استخدم const للمتغيرات التي لن يُعاد إسنادها (مثل تحديد عنصر jQuery)، واستخدم let للمتغيرات التي قد تتغير. يمنع ذلك عمليات إعادة الإسناد غير المقصودة ويحسن الوضوح.

جرّب النقر على الزر:

// Assume HTML: <div id="output"></div><button id="myBtn">Click Me</button>
const $outputDiv = $('#output');
const $myButton = $('#myBtn');

let counter = 0;

$myButton.on('click', () => {
  counter++;
  $outputDiv.text(`Button clicked ${counter} times.`);
});

الدوال السهمية في دوال الاستدعاء

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

لاحظ سهولة الوصول إلى appName:

// Assume HTML: <button id="greetBtn">Greet</button><div id="greeting"></div>
const $greetButton = $('#greetBtn');
const $greetingDiv = $('#greeting');

const appName = "CoddyKit App";

$greetButton.on('click', () => {
  // 'this' here refers to the surrounding context (window), not the button
  $greetingDiv.text(`Hello from ${appName}!`);
});

القوالب النصية لإنشاء HTML

تجعل القوالب النصية (باستخدام علامتي الاقتباس الخلفيتين ` `) إنشاء السلاسل النصية الديناميكية أسهل بكثير، خصوصًا عند إدراج المتغيرات أو المحتوى متعدد الأسطر، مقارنةً بضم السلاسل النصية التقليدي.

لاحظ مدى سهولة إنشاء HTML ديناميكي:

// Assume HTML: <ul id="items"></ul>
const $itemsList = $('#items');
const userName = "Alice";
const itemCount = 3;

const listItemHtml = `
  <li>
    <b>User:</b> ${userName}
    <br>
    Items: ${itemCount}
  </li>
`;

$itemsList.append(listItemHtml);

تفكيك كائنات الأحداث

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

انقر لرؤية تفاصيل الحدث:

// Assume HTML: <button id="eventBtn">Log Target</button><div id="eventOutput"></div>
const $eventButton = $('#eventBtn');
const $eventOutput = $('#eventOutput');

$eventButton.on('click', ({ target, type }) => {
  // Destructured 'target' and 'type' from the event object
  $eventOutput.text(`Event: ${type}, Target ID: ${target.id}`);
});

الحذر مع `this` والأسهم

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

راقبوا الناتج عند النقر على أزرار مختلفة:

// Assume HTML: <button class="colorBtn" id="red">Red</button><button class="colorBtn" id="blue">Blue</button><div id="log"></div>
const $colorButtons = $('.colorBtn');
const $logDiv = $('#log');

$colorButtons.on('click', function() {
  // 'this' here refers to the clicked button element
  $logDiv.text(`Clicked button with ID: ${this.id}`);
});

// An arrow function here would bind 'this' to the global window

`$.noConflict()` للتعايش

إذا كنتم تستخدمون مكتبات JavaScript أخرى تستخدم أيضًا الرمز $، فإن طريقة jQuery ‏$.noConflict() ضرورية. فهي تحرّر المعرّف $، مما يتيح لكم استخدام jQuery بدلًا منه وتجنّب التعارضات.

// Assume another library uses '$'
// jQuery is loaded first
$.noConflict();

// Now, '$' is free for another library
// Use 'jQuery' for jQuery methods
jQuery(document).ready(() => {
  jQuery('#status').text('jQuery is active with noConflict!');
});
// Assume HTML: <div id="status"></div>

أفضل ممارسات التكامل

لدمج jQuery بفاعلية مع JS الحديث:

تصريحات متسقة: استخدموا const وlet باستمرار.
الدوال السهمية في مواضعها: استخدموا الدوال السهمية لعمليات الاستدعاء التي لا يكون فيها سياق this هو عنصر DOM.
القوالب النصية: اعتمدوا عليها لبناء HTML أو سلاسل نصية ديناميكية.
تغليف jQuery: أبقوا المنطق الخاص بـ jQuery مجمّعًا ومنفصلًا عن دوال الأدوات النقية في ES6+.

اختبار سريع: ES6+ وjQuery

أي من ميزات ES6+ التالية يمكن استخدامه بفاعلية مع jQuery لكتابة تعليمات برمجية أنظف وأكثر حداثة؟

مراجعة: تحديث jQuery

لقد تعلّمتم كيفية دمج ميزات ES6+ مثل const/let، والدوال السهمية، والقوالب النصية، والتفكيك، مع jQuery بسلاسة.

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

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

هل درس «التعايش مع صياغة ES6+» مجاني؟

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

ماذا ستتعلم في «التعايش مع صياغة ES6+»؟

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

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

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

كم من الوقت يستغرق درس «التعايش مع صياغة ES6+»؟

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

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

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

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

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