تبسيط البرمجة ب JavaScript باستخدام jQuery


الدرس: إنشاء البرنامج المساعد (PLUGIN)


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

هيكل المكون الإضافي


لقد تم التفكير جيدًا في أصغر التفاصيل. بما في ذلك فيما يتعلق بإنشاء الإضافات. إذا شرعت في المغامرة ، فكل ما تحتاج إلى معرفته هو أن كائنات jQuery تعتمد جميعها على النموذج الأولي jQuery.fn . بمعنى آخر ، إذا أضفت وظيفة JavaScript جديدة إلى الكائن jQuery.fn ، فستصبح jQueryلاً! على سبيل المثال ، تحدد التعليمة البرمجية التالية الطريقة gis() :

jQuery.fn.gis = function(param1, param2, param3, …)
{
  // JavaScript
} 
إذا قمت بحفظ هذا الكود في ملف بملحق .js وقمت بالإشارة إليه في صفحة ويب باستخدام علامة <script>، فيمكنك استخدامه مباشرةً عن طريق القيام بمثل هذا:

$('p').gis(5, 'abc', 10); 
يطبق هذا البيان الطريقة gis() على جميع العلامات <p> في الوثيقة بتمرير المُدخلات الثلاث المحددة بين الأقواس. تهانينا ، لقد قمت للتو بإنشاء مكونك الإضافي الأول jQuery !
هذا كل شيئ ؟ هل الإضافات الأخرى مبنية بالفعل على هذا النموذج؟
حسنا ... نعم! بعض التفاصيل الصغيرة التي سيتم مناقشتها لاحقًا.
تعارض بين مكتبات JAVASCRIPT المتعددة
تستخدم العديد من مكتبات JavaScript علامة $ للإشارة إلى متغير أو وظيفة فريدة لها. عندما تستخدم صفحة الويب هذه المكتبة وكذلك jQuery ، فهناك تعارض يمكن أن يؤدي إلى تعطيل في أي من المكتبات.
لحسن الحظ ، من الممكن أن تطلب من jQuery عدم استخدام الاسم المستعار "$" بدلاً من كلمة "jQuery" . لهذا ، نستخدم الطريقة noConflict() :

jQuery.noConflict();
بمجرد تنفيذ هذه التعليمات ، يمكن استخدام $ sign بالاتفاق مع المكتبة الأخرى. إليك رمز مثال:

<script src="uneBibliothequeJavaScript.js"></script>
<script src="jquery.js"></script>
<script>
  $.noConflict();
  // هنا يمكنك إدراج واحد أو أكثر من التعليمات
  // الذين يستخدمون علامة $ في الاتفاق مع المواصفات 
  // من المكتبة aLibraryJavaScript.js
</script> 
باستخدام تعليمة $.noConflict() في الإضافات ، تجعلها قابلة للاستخدام مع مكتبات JavaScript الأخرى. لذلك ، من الممارسات الجيدة التنفيذ المنهجي في المكونات الإضافية.
هل هذا يعني أنه بعد تنفيذ التعليمات $.noConflict() في مكون إضافي ، لن أتمكن من استخدام تعليمات jQuery بعد الآن؟
بالطبع لا هذا يعني ببساطة أنه بدلاً من استخدام علامة $ ، ستستخدم كلمة! "jQuery" . يكون هذا الموقف مقبولًا تمامًا إذا قمت بتطوير مكونات إضافية لا تتجاوز مائة سطر من التعليمات البرمجية. لكنه سرعان ما يصبح لا يطاق.
استمر في استخدام الاسم المستعار "$" في البرنامج المساعد JQUERY
جميع مبرمجي jQuery معتادون على استخدام الاسم المستعار "$" بدلاً من "jQuery" ، وسترى أن هذا لا يزال ممكنًا حتى بعد العبارة jQuery.noConflict() . تكمن قوة الجولة هذه في استخدام وظيفة مجهولة (بمعنى بدون اسم):

 (function($) {
  // أدخل هنا كود البرنامج المساعد jQuery الخاص بك
})(jQuery); 
يستغرق بضع لحظات لمراجعة هذه الميزة. بناء الجملة المستخدمة غير عادية إلى حد ما . لكن من خلال النظر عن قرب ، نفهم الآلية دون صعوبة: الوظيفة المجهولة لها مُدخل. خلال طلبه ، يتم نقل قيمة "jQuery" له. لأنه في تعريف الدالة يتم تسمية المُدخل "$" ، ستحل جميع العبارات الموجودة داخل الوظيفة تلقائيًا محل علامة $ بـ "jQuery". وهو بالضبط التأثير المطلوب. لذلك من الممكن الاستمرار في استخدام الاسم المستعار "$" في البرنامج المساعد إذا قمت بتضمين الكود الخاص به داخل الوظيفة المجهولة. في حالتنا ، يصبح الرمز ما يلي:

 (function($) {
  $.fn.gis = function(paramètres)
  {
    …
  };
})(jQuery); 
تصفح العناصر من المحدد
يتم تطبيق أساليب JQuery على محدد. على سبيل المثال ، يتم تطبيق العبارة التالية gis() على جميع علامات الفئات premier :

$('.premier').gis();
قد يحتوي المستند على علامة فئة واحدة فقط premier، ولكنه قد يحتوي أيضًا على عدة علامات . لمراجعة العناصر المختلفة التي يمكن إرجاعها بواسطة المحدد ، ستستخدم العبارة each() :

this.each(function()
{
  // plugin
}); 
يصبح كود البرنامج المساعد كما يلي:

 (function($) {
  $.fn.gis = function(paramètres)
  {
    this.each(function() {
      // Les instructions du plugin
    });
  };
})(jQuery); 
لا تكسر السلسلة
لقد جربتها عدة مرات في هذه الدورة: يمكن ربط العديد من طرق jQuery . على سبيل المثال ، هاتين الإرشادات:

$('.rouge').css('background','red');
$('.rouge').css('color','yellow'); 
... تعادل هذه التعليمات:

$('.rouge').css('background','red').css('color','yellow'); 
وذلك لأن الأسلوب css() يُرجع الكائن الذي يطلق عليه. تنطبق هذه الملاحظة أيضًا على معظم أساليب jQuery الآخرين. عند كتابة مكون إضافي ، يجب عليك اتباع هذه الممارسة من خلال إعادة الكائن الذي تم تطبيقه على طريقتك. هذا بسيط للغاية ، حيث أن التعليمة واحدة كافية:

return this ; 
هنا (أخيرًا!) هيكل لإضافاتك jQuery المستقبلية:

 (function($) {
  $.fn.gis = function(paramètres)
  {
    this.each(function() {
      // تعليمات البرنامج المساعد
    });
    Return this;
  };
})(jQuery); 

البرنامج المساعد الأول


الآن أنت تعرف كيف يتم بناء الإضافات jQuery . حان الوقت لممارسة التمارين من خلال كتابة البرنامج المساعد الأول. للبدء برفق ، أقترح عليك إنشاء مكون إضافي يعيّن السمات المميزة بالخط العريض والمائل والمسطر لمحتوى العلامات التي يتم تطبيقها عليها. هذا هو البرنامج المساعد الشهير "gis" الذي أتحدث إليكم عنه منذ بداية الفصل.
هذا البرنامج المساعد بسيط للغاية: لا يتطلب أي مُدخلات وهو محتوى لتطبيق ثلاث خصائص CSS على محتوى العلامات المعنية. هنا هو الكود المستخدم:

 (function($) {
  $.fn.gis = function()
  {
    this.each(function() {
      $(this).wrap('');
    });
    return this;
  };
})(jQuery); 
من خلال تطبيق الأسلوب wrap('<b><i><u></u></i></b>')على العناصر المحددة ، ستحيط محتوياتها بالعلامات <b>، <i>و <u> . سيظهر النص بخط غامق ومائل وتسطير.
احفظ هذا الرمز في الملف gis.js . سنستخدم الآن هذا البرنامج المساعد في صفحة HTML .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> استخدام plugin gis</title>
</head>
<body>
  <p class="grasItaliqueSouligne"> يجب أن يظهر هذا النص بخط غامق
                         ، مائل ، مسطر بعد النقر على الزر </p>
  <p> يجب أن يبقى هذا النص بدون تغيير </p>
  <p class="grasItaliqueSouligne"> يجب أن يظهر هذا النص بخط غامق
                         ، مائل ، مسطر بعد النقر على الزر </p>
  <p> يجب أن يبقى هذا النص بدون تغيير </p><br />
  <button id="action"> انقر هنا لاستخدام plugin gis</button>        

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="gis.js"></script> 
  <script>
    $(function() {
      $('#action').click(function(){
        $('.grasItaliqueSouligne').gis();
      });
    });
  </script>
</body>
</html> 
يحتوي النص الأساسي للوثيقة على أربع فقرات (فئتان grasItaliqueSouligne واثنتان بلا فئة ) وزر أمر معرف #action . لاحظ الدعوة إلى المكوّن الإضافي "gis" (الموجود في نفس المجلد مثل الصفحة التي يتم تنفيذها) .
عند النقر فوق الزر ، gis() يتم تطبيق الطريقة على عناصر الفصل grasItaliqueSouligne، أي على الفقرتين الأولى والثالثة:

$('#action').click(function(){
  $('.grasItaliqueSouligne').gis();
}); 
لا بد لي من الاعتراف ، هذا البرنامج المساعد ليس مثيرا جدا للاهتمام. ماذا عن شيء متقدم أكثر؟

برنامج المساعد أكثر طموحا


إذا كنت جاهزًا للمضي قدمًا ، أقترح عليك تطوير مكون إضافي ينفّذ ترتدًا متعددًا مغموسًا بعنصر (يشبه إلى حد ما كرة تم إسقاطها على الأرض). ولكن قبل البدء في الوصول إلى تفاصيل كود jQuery ، هناك حاجة إلى التفاف رياضي صغير ، إلا إذا كان لديك فكرة دقيقة عن الجيوب الأنفية الأساسية cardinal sinus ...
تحت هذا الاسم الهمجي تخفي وظيفة رياضية لطيفة للغاية والتي سوف ينتج تمثيلها تأثير الارتداد المطلوب: ، y = abs(sin(x))/x حيث x يمثل الموضع على المحور الأفقي y والموضع على المحور العمودي. يوضح الشكل التالي كيف يبدو هذا المنحنى.
jQuery web
تمثيل رسومي للدالة y = abs (sin (x)) / x
الآن أنت تعرف ما هي الجيوب الأنفية الكاردينال. يمكننا إغلاق هذا جانباً والعودة إلى برمجة jQuery . للتوصل إلى أعلى (قليلاً ، قليل جدًا!) الكود ، سنستخدم مُدخلين في المكون الإضافي: سعة الإزاحة الأفقية وسعة الإزاحة الرأسية. سوف نسمي هذا البرنامج المساعد "rebound" ، وهنا هو الكود:

 (function($) {
  $.fn.rebound = function(amplX, amplY)
  {
    this.each(function() {
      var x, y, affX, affY, initX, initY;
      initX = parseInt($(this).css('left'));
      initY = parseInt($(this).css('top'));
      for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)
      {
        y = (Math.abs(Math.sin(x)))/x;
        affX = initX + x * amplX;
        affY = initY - y * amplY;
        $(this).animate({left: affX, top: affY},10);
      }
    });
    return this;
  };
})(jQuery); 
إنه أمر مخيف بعض الشيء ، لكنني سأشرح كيف يعمل.
لاحظ استخدام المُدخلات amplX وفي amplY تعريف الوظيفة:

$.fn.rebound = function(amplX, amplY) 
في كود jQuery ، سيتم الوصول إلى القيم التي تم تمريرها إلى البرنامج المساعد عبر المتغيرات amplX و amplY . this.each() تحدد العبارة الأولى التي تلي الحلقة المتغيرات التي سيتم استخدامها في البرنامج المساعد:

var x, y, affX, affY, initX, initY; 
في هذه التعليمات:
  • X و yهي الإحداثيات وتحسب على أساس صيغة دالة الجيب.
  • affX و affY هي الإحداثيات عرض العنصر معالجة الحالي.
  • initX و initYهي الإحداثيات بدءا من عنصر من عناصر التجهيز الحالي.
ويتم الحصول على إحداثيات بدءا من تمرير القيم left و top طريقة css() ، وبتطبيق هذا الأسلوب لعنصر معالجة الحالي. لاحظ استخدام وظيفة JavaScript parseInt() لتحويل قيمة السلسلة التي يتم إرجاعها بواسطة الطريقة css() إلى قيمة عددية صحيحة:

initX = parseInt($(this).css('left'));
initY = parseInt($(this).css('top')); 
الحلقة التالية for تجعل الجزء الأكبر من العلاج. وهي تختلف بين الإحداثي السيني بين π/2 و 4π في خطوات 0.2 (لا شيء يمنعك من تجربة القيم الأخرى للحصول على ارتداد مختلف قليلاً):

for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2) 
يتم الحصول على الإحداثي من خلال تطبيق الجيوب الأنفية الكاردينال على القيمة الحالية للمتغير x :

y = (Math.abs(Math.sin(x)))/x; 
يتم الحصول على إحداثيات العرض عن طريق إضافة إحداثيات البداية ( initX و initY ) إلى الإحداثيات المحسوبة ( x و y ) الموزونة بالمُدخلات المقدمة إلى المكون الإضافي ( amplXو amplY ) :

affX = initX + x * amplX;
affY = initY - y * amplY; 
ثم يتم نقل العنصر الجاري معالجته بالطريقة animate() . خصائص left و top يتم تعديلها لتحقيق (على التوالي) بتنسيق affX و affY . تم تحديد المدة في 10 ميلي ثانية. هنا مرة أخرى ، لا يوجد شيء يمنعك من تجربة أوقات السفر الأخرى:

 (this).animate({left: affX, top: affY},10); 
دعونا نرى الآن كيفية استخدام هذا البرنامج المساعد:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Utilisation du plugin rebond</title>
  <style type="text/css">
     img { position: absolute; }
     #balle { top: 100px; left: 100px; }  
  </style>
</head>

<body>
  <img src="balle.png" id="balle">
  <button id="action">Cliquez ici pour utiliser le plugin rebond</button>

  <script src="jquery.js"></script>
  <script src="rebond.js"></script> 
  <script>
    $(function() {
      $('#action').click(function(){
        $('img').rebond(10, 100);
      });
    });
  </script>
</body>
</html> 
يحتوي هذا المستند على صورة #balle معرف وزر معرف #action . تضع بعض تعليمات CSS الصورة تمامًا عند الإحداثيات (100 ، 100) . عند النقر فوق الزر #action ، يتم استدعاء البرنامج المساعد "rebound" بتمرير المُدخلات 10و 100 :

$('#action').click(function(){
  $('img').rebond(10, 100);
}); 
ويتم الباقي وحده ، هو البرنامج المساعد الذي يدعمه.
إذا كنت ترغب في ترتد الرأسي والأفقي لا، استخدم هذا الأمر: $('img').rebond(0, 100) ;. أنت تعرف الآن ما يكفي لإنشاء مكونات إضافية من شأنها أن تسهل تطوراتك ، ولما لا ، تلك الموجودة في مجتمع jQuery من المبرمجين. إذا كنت ترغب في إتاحة إبداعاتك لمطوري jQuery الآخرين ، فاحرص بشكل خاص على الوثائق. بيّن كيفية استخدام المكوّن الإضافي الخاص بك ، وبيّن كيفية عمل إعداداته وإعطاء أمثلة عديدة على الطلبات.
  • ليس من الصعب كتابة مكون إضافي لـ jQuery: فقط استخدم الهيكل الأيمن وأدخل تعليمات jQuery و JavaScript التي ستؤدي الإجراءات المطلوبة.
  • تتيح لك الوظيفة المجهولة الاستمرار في استخدام الاسم المستعار "$" لـ jQuery في رمز البرنامج المساعد. بما في ذلك إذا كانت الصفحة التي تستدعي المكون الإضافي تشير إلى مكتبة JavaScript أخرى تستخدم علامة $ داخليًا.
  • تتيح الطريقة this.each() إمكانية استعراض العناصر التي يجب تطبيق المكون الإضافي عليها واحدة تلو الأخرى.
  • return this ;يضمن البيان استمرارية سلسلة jQuery . مع ذلك ، يمكن ربط البرنامج المساعد الخاص بك إلى طريقة jQuery أو مكون إضافي.