jQuery Academy · درس

أنماط تصميم الإضافات وتحديد النطاق

افهم أنماط تصميم الإضافات الشائعة مثل تعبير الدالة المُستدعاة فورًا (IIFE) وأفضل ممارسات تحديد نطاق المتغيرات لتجنّب التعارضات.

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

ما هي إضافات jQuery؟

إضافات jQuery هي أجزاء صغيرة من التعليمات البرمجية توسّع إمكانات jQuery، وتتيح لك إضافة أساليب جديدة إلى الكائن $.fn.

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

لماذا نستخدم الإضافات؟

توفر الإضافات فوائد عديدة:

إعادة الاستخدام: اكتب التعليمات البرمجية مرة واحدة، واستخدمها في كل مكان.
الوحدية: قسّم الميزات المعقدة إلى أجزاء أصغر يسهل إدارتها.
التغليف: أبقِ المنطق الداخلي لإضافتك منفصلًا عن النصوص البرمجية الأخرى.
المشاركة: شارك ميزاتك المخصصة بسهولة مع المطورين الآخرين.

البنية الأساسية للإضافة (مبدئيًا)

يمكن إنشاء إضافة بسيطة جدًا بإضافة دالة إلى $.fn. لكن لهذا الأسلوب عيبًا كبيرًا: فهو لا يحمي التعليمات البرمجية من تعارضات المتغيرات العامة.

تأمل هذه الإضافة البسيطة غير المغلفة. فهي تضيف mySimplePlugin مباشرةً إلى النموذج الأولي لـ jQuery:

$.fn.mySimplePlugin = function() {
  return this.each(function() {
    $(this).css("color", "blue");
  });
};

// Usage (assuming jQuery and HTML are loaded):
// $('p').mySimplePlugin();

التعريف بـ IIFE

إن تعبير الدالة المُستدعاة فورًا (IIFE) هو دالة JavaScript تُنفَّذ فور تعريفها. وينشئ نطاقًا خاصًا لمتغيراتها ودوالها، ما يمنعها من تلويث النطاق العام.

وهذا أمر بالغ الأهمية للإضافات لتجنب التعارضات مع النصوص البرمجية الأخرى في الصفحة.

(function() {
  var privateVar = "I'm private!";
  console.log(privateVar);
})();

// console.log(privateVar); // This would cause an error!

النمط القياسي لـ IIFE في الإضافات

يستخدم النمط الموصى به لإضافات jQuery تعبير IIFE يتلقى jQuery وسيطًا ويمنحه الاسم المستعار $. ويضمن ذلك أن يشير $ داخل إضافتك دائمًا إلى jQuery، حتى إذا كانت مكتبة أخرى (مثل Prototype.js) تستخدم $ أيضًا.

(function($) {
  // Your plugin code goes here
  // $ now safely refers to jQuery

  $.fn.mySafePlugin = function() {
    return this.each(function() {
      $(this).text("Hello from safe plugin!");
    });
  };

})(jQuery); // Pass jQuery object to the IIFE

// Example usage after plugin definition:
// $('div').mySafePlugin();

إنشاء إضافتك المغلفة الأولى

لننشئ إضافة بسيطة باستخدام نمط IIFE. ستضيف هذه الإضافة فئة محددة إلى العناصر المحددة. لاحظ أن جميع المتغيرات والدوال داخل IIFE ذات نطاق محلي.

جرّب تشغيل هذا المثال:

(function($) {
  $.fn.highlightText = function() {
    return this.each(function() {
      // 'this' refers to the DOM element in .each()
      // $(this) wraps it into a jQuery object
      $(this).addClass('highlighted');
    });
  };
})(jQuery);

// Assume we have some HTML like:
// <p>This is some text.</p>
// <p>Another paragraph.</p>

// Now, let's use our plugin:
$('p').highlightText();

// This would make paragraphs have a 'highlighted' class.

فهم ‎'this'‎ في الإضافات

داخل دالة الإضافة (مثل $.fn.myPlugin = function() { ... })، تشير الكلمة المفتاحية this إلى كائن jQuery الذي استدعى الإضافة.

للعمل مع كل عنصر DOM على حدة ضمن المجموعة المطابقة، ينبغي استخدام this.each(function() { ... });. وداخل استدعاء .each()، تشير this إلى عنصر DOM الحالي.

(function($) {
  $.fn.showInfo = function() {
    console.log("Plugin called on: ", this.selector);
    return this.each(function() {
      // 'this' inside .each refers to the DOM element
      var elementTag = this.tagName;
      console.log("Processing element: ", elementTag);
      $(this).append(" <i>(processed)</i>");
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Item 1</p><div>Item 2</div>
$('p, div').showInfo();

النطاق المحلي للمتغيرات الداخلية

داخل IIFE الخاصة بإضافتك، صرّح عن أي متغيرات أو دوال مساعدة باستخدام var أو let أو const. فهذا يبقيها محلية تمامًا لإضافتك ويمنع تعارضها مع النصوص البرمجية الأخرى.

وهذه ممارسة موصى بها للحفاظ على تعليمات برمجية نظيفة وخالية من التعارضات.

(function($) {
  // This helper function is only visible inside this IIFE
  function getFormattedTime() {
    var now = new Date();
    return now.toLocaleTimeString();
  }

  $.fn.addTimestamp = function() {
    return this.each(function() {
      var timestamp = getFormattedTime(); // Call local helper
      $(this).append('<small> - ' + timestamp + '</small>');
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Last updated:</p>
$('p').addTimestamp();

منع تسرّب المتغيرات العامة

من دون IIFE، يصبح أي متغير يُصرَّح عنه مباشرةً في النص البرمجي (من دون var أو let أو const) متغيرًا عامًا. وقد يؤدي ذلك إلى سلوك غير متوقع عندما تعرّف نصوص برمجية متعددة متغيرات بالاسم نفسه.

تعمل IIFE كغلاف واقٍ يضمن بقاء المكونات الداخلية لإضافتك خاصة.

تحقق سريع من فوائد IIFE

لقد تعلمت عن تعبير الدالة المُستدعاة فورًا (IIFE) ودوره في تطوير إضافات jQuery. وهو نمط أساسي لإنشاء إضافات متينة وخالية من التعارضات.

ما الفائدة الأساسية من تغليف إضافة jQuery داخل IIFE، ولا سيما النمط (function($) { ... })(jQuery);؟

مراجعة: أنماط الإضافات والنطاقات

استكشفنا في هذا الدرس المفاهيم الأساسية لإنشاء إضافات jQuery متينة:

إضافات jQuery: توسّع وظائف jQuery لإتاحة إعادة الاستخدام.
IIFE: ينشئ تعبير الدالة المُستدعاة فورًا نطاقًا خاصًا.
النمط القياسي: يُعد (function($) { ... })(jQuery); مهمًا لمنع تعارضات $ العامة وتغليف التعليمات البرمجية.
الكلمة المفتاحية this: تشير إلى كائن jQuery؛ استخدم .each() للعناصر الفردية.
النطاق المحلي: صرّح عن المتغيرات الداخلية (var وlet وconst) داخل IIFE لمنع تسرّبها إلى النطاق العام.

يضمن إتقان هذه الأنماط أن تكون إضافاتك وحدية وقابلة للصيانة ومتوافقة مع النصوص البرمجية الأخرى.

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

هل درس «أنماط تصميم الإضافات وتحديد النطاق» مجاني؟

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

ماذا ستتعلم في «أنماط تصميم الإضافات وتحديد النطاق»؟

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

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

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

كم من الوقت يستغرق درس «أنماط تصميم الإضافات وتحديد النطاق»؟

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

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

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

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

أنماط تصميم الإضافات وتحديد النطاق
إنشاء إضافات قابلة للتهيئة وإعادة الاستخدام
دمج الأساليب العامة ودوال الاستدعاء

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