استفاده از متد ()noConflict در جی کوئری

Ratings
(0)

مسئله

اگر علاوه بر جی کوئری، از یک کتابخانه ی جاوا اسکریپت دیگر نیز در صفحه استفاده شده باشد، و  هردوی این کتابخانه ها، متغیر $ را اجرا کرده باشند، باعث می شود تنها یکی از این متدها به درستی کار کنند.

راه حل

فرض کنید یک صفحه ی وب داریم که می خواهیم آن را آپدیت کنیم، و برنامه نویسی قبلی صفحه، از یک کتابخانه ی دیگر جاوا اسکریپت به نام Prototype استفاده کرده است اما ما هنوز می خواهیم از جی کوئری استفاده کنیم. استفاده ی همزمان از این دو کتابخانه باعث ایجاد تعارض(conflict) می شود، و یکی از این دو کتابخانه کار نخواهد کرد. و این، به اینکه کدام یک، در آخر بخش head  از صفحه قرار گرفته است، بستگی دارد. اگر ما هردوی کتابخانه های jQuery و Prototype  را به صورت زیر در صفحه ی خود داشته باشیم:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

این کار باعث می شود که یک خطای جاوا اسکریپت ایجاد شود:

element.dispatchEvent is not a function in prototype.js.

خوشبختانه جی کوئری یک راه حل به ما ارائه می دهد؛ و آن استفاده از متد jQuery.noConflict() است:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Chapter 3 - Recipe 7 - Configuring jQuery to free up a conflict with another library</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
<!--
  jQuery.noConflict();
  // Use jQuery via jQuery(...)
  jQuery(document).ready(function(){
   jQuery("div#jQuery").css("font-weight","bold");
  });
 // Use Prototype with $(...), etc.
 document.observe("dom:loaded", function() {
  $('prototype').setStyle({
   fontSize: '10px'
  });
 });
//-->
</script>
</head>
<body>
 <div id="jQuery">Hello, I am a jQuery div</div>
 <div id="prototype">Hello, I am a Prototype div</div>
</body>
</html>

 (تصویر 3.8)تصویر 3.8

 وقتی که ما عبارت jQuery.noConflict() را فراخوانی می کنیم، این دستور کنترل متغیر $ را به کسی می دهد که پس تعریف این دستور، اول از همه از علامت $ استفاده کند. (در حقیقت علامت $ را آزاد می کند). وقتی که ما متغیر $ را با دستور مذکور آزاد کنیم، می توانیم از جی کوئری با استفاده از متغیر jQuery استفاده کنیم. بعنوان مثال، اگر ما از دستور $("div p") استفاده می کنیم، اکنون می توانیم از دستور jQuery("div p") استفاده کنیم.

دستور jQuery.noConflict() : با استفاده از این متد دیگر نیاز به بکار بردن علامت $ در کدهای جی کوئری نیست. 

توضیحات

کتابخانه ی jQuery و تمام پلاگین های آن به وسیله ی فضای نام(namespace)  jQuery محدود شده اند. و ما نباید با متغیر   jQuery  و  دیگر کتابخانه ها مثل Prototype یا YUI دچار تعارض شویم. اما جی کوئری از علامت $ بعنوان یک میانبر برای دسترسی به آبجکت jQuery استفاده می کند. این میانبر است که با دیگر کتابخانه هایی که از علامت $  استفاده می کنند، دچار تعارض(conflict) می شود. اما همان طور که بخش راه حل گفتیم، ما می توانیم jQuery را از میانبر $ جدا کنیم و تنها از آبجکت jQuery استفاده کنیم.

یک گزینه ی دیگر نیز وجود دارد. اگر ما بخواهیم مطمئن شویم که jQuery با دیگر کتابخانه ها تعارض و تضاد پیدا نمی کند اما هنوز از نام مخفف خود استفاده کند، می توانیم دستور jQuery.noConflict() را فراخوانی کنیم و آن را به یک متغیر انتساب دهیم:

var j = jQuery.noConflict();
j(document).ready(function(){
  j("div#jQuery").css("font-weight","bold");
});

 ما می توانیم با انتخاب نام یک متغیر که مقدار jQuery.noConflict()  را به آن انتساب داده ایم، نام کوتاه دلخواه خود را تعریف کنیم. در نهایت، یک گزینه ی دیگر این است که کدهای جی کوئری خود را در داخل یک کلوژر(closure) قرار دهیم:

jQuery.noConflict();
(function($){
   $("div#jQuery").css("font-weight","bold");
})(jQuery);

 با استفاده از یک کلوژر، ما به طور موقت متغیر $ را در دسترس آبجکت jQuery قرار می دهیم. در حالی که در داخل تابع مورد استفاده قرار می گیرد. هنگامی که این تابع پایان می یابد، متغیر $ به کتابخانه ای که کنترل اولیه(initial control) داشت برمی گردد.

نکته: اگر شما از این تکنیک استفاده کنید؛ نمی توانید از  متدهای دیگر کتابخانه ها در داخل تابع کپسوله شده ی علامت $ استفاده کنید.

  {module کمک نقدی به نویسنده}

  • بازدید: 575

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال