التابع ‎‎jQuery.noConflict()‎‎ في jQuery

من موسوعة حسوب
< jQuery‏ | jQuery
مراجعة 13:28، 1 يوليو 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - 'jQeury' ب'jQuery')
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

jQuery.noConflict( [removeAll ] )‎

القيم المعادة

يعيد كائنًا من النوع Object.

الوصف

يجبر هذا التابع jQuery على التنازل عن التحكم بالمتغيِّر $.

jQuery.noConflict( [removeAll ] )‎

أُضيف مع الإصدار: 1.0.

removeAll

قيمةٌ منطقيَّةٌ تحدِّد إن كان يراد إزالة جميع متغيرات jQuery من النطاق العام (global scope) بما فيها jQuery نفسها.

تستعمل أغلب مكتبات JavaScript المعامل $ بوصفه دالةً أو اسم متغيِّر مثلما تفعل jQuery تمامًا. ففي حالة مكتبة jQuery، يُعدُّ $ اسمًا بديلًا للعبارة jQuery، لذا تكون جميع الوظائف متاحة دون استعمال $. إن أردت استعمال مكتبة أخرى من مكتبات JavaScript مع مكتبة jQuery جنبًا إلى جنب، فيمكن إجبار مكتبة jQuery على التخلي عن التحكم بالمتغيِّر $ لكي تستعمله المكتبة الأخرى عبر استدعاء ‎$.noConflict()‎. تُحفَظ المرجعيَّات القديمة للمتغير $ خلال تهيئة jQuery، لذا يستطيع التابع ‎$.noConflict()‎ استرجاعها بسهولة.

إن استُعمل إصداران مختلفان من jQuery لعدَّة أسباب (ولا ينصح بذلك مطلقًا)، فسيؤدي استدعاء ‎$.noConflict( true )‎ من الإصدار الثاني إلى إعادة متغيرات jQuery في النطاق العام إلى ما كانت عليه في الإصدار الأول.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// تستطيع المكتبة الأخرى الآن استعمال $ هنا
</script>

هذه التقنية مفيدةٌ جدًا عند استعمالها بالتزامن مع التابع ‎.ready()‎، إذ يمكن استعمال $ ضمن دالة رد النداء المُمرَّرة إليه دون الخوف من حدوث أي تعارض بين مكتبة jQuery والمكتبات الأخرى التي تستعمله:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
  // jQuery تستعمل الشيفرة هنا المتغير $ الخاص بمكتبة
});
// تستعمل الشيفرة هنا المتغير $ الخاص بالمكتبة الأخرى
</script>

تستطيع إزالة الاسم jQuery من النطاق العام أيضًا إن كان هذا ضروريًا عبر تمرير القيمة true إلى التابع. لن تضطر في أغلب الأحيان إلى فعل ذلك، وفي حال توجب عليك فعله (مثل إن أردت استعمال إصدارات متعدِّدة من مكتبة jQuery في الصفحة نفسها)، فيجب حينئذٍ أن تأخذ بالحسبان أنَّ أغلب الإضافات تعتمد على وجود المتغير jQuery وقد لا تعمل كما ينبغي لها في هذه الحالة.

أمثلة

استعمال الكائن الحقيقي الذي كان يشير إليه $ عند استعمال مكتبات أخرى:

jQuery.noConflict();
// jQuery افعل شيئًا مع 
jQuery( "div p" ).hide();
// افعل شيئًا آخر مع ()$ للمكتبات الأخرى
$( "content" ).style.display = "none";

الطلب من jQuery بالتخلي عن $ ثمَّ إنشاء وتنفيذ دالةٍ مع استعمال $ كاسم بديل يشير إلى jQuery ضمن نطاقها، إذ لا يتوافر الكائن $ الأصلي داخل الدالة. يعمل هذا جيدًا في أغلب الإضافات التي لا تعتمد على أيَّة مكتبات أخرى:

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // jQuery يُستعمَل $ هنا كاسم بديل لـ
  });
})(jQuery);
 
// أمَّا هنا، فيُستعمل $ كاسم بديل لمكتبات أخرى

إنشاء اسم بديل جديد عوضًا عن $ لاستعماله في كامل الشيفرة:

var j = jQuery.noConflict();
 
// jQuery افعل شيئًا مع
j( "div p" ).hide();
 
// افعل شيئًا آخر مع ()$ للمكتبات الأخرى
$( "content" ).style.display = "none";

نقل jQuery بشكل كامل إلى مجال أسماء (namespace) جديد في كائن آخر:

var dom = {};
dom.query = jQuery.noConflict( true );

// الجديدة‎ jQuery افعل شيئًا مع‎ 
dom.query( "div p" ).hide();
 
// افعل شيئًا آخر مع ()$ للمكتبات الأخرى
$( "content" ).style.display = "none";
 
// jQuery افعل شيئًا إصدار آخر لمكتبة 
jQuery( "div > p" ).hide();

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.noConflict مثالٌ عن استعمال التابع</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="log">
  <h3>قبل استدعاء $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>
 
<script>
var $log = $( "#log" );
 
$log.append( "تحميل إصدار آخر ($): " + $.fn.jquery + "<br>" );
 
// في النطاق العام إلى ما كانت عليه في الإصدار المحمل أولًا jQuery استرجاع متغيرات 
// (الإصدار الأحدث)
 
jq162 = jQuery.noConflict( true );
 
$log.append( "<h3>بعد استدعاء $.noConflict(true)</h3>" );
$log.append( "الإصدار المحمل أولًا ($): " + $.fn.jquery + "<br>" );
$log.append( "الإصدار المحمل ثانيًا (jq162): " + jq162.fn.jquery + "<br>" );
</script>
 
</body>
</html>

مصادر