noConflict رفع تداخل () (noConflict())
گاهی در یک صفحه از چند فریم ورک جاوااسکریپت استفاده می کنی. مثلا jQuery و یک کتابخانه دیگر. هر دو شاید علامت $ را استفاده کنند. اینجا متد noConflict در jQuery به کمک تو می آید و جلوی دعوای این کتابخانه ها را می گیرد.
jQuery و فریم ورک های دیگر جاوااسکریپت
در jQuery، علامت $ یک میان بر برای نوشتن jQuery است. یعنی به جای jQuery("p") می توانی $("p") بنویسی. اما فریم ورک های دیگری مثل Angular و Backbone و Ember و Knockout هم وجود دارند.
حالا اگر آن ها هم از $ به عنوان میان بر خودشان استفاده کنند چه می شود؟ در این حالت دو کتابخانه روی یک علامت دعوا می کنند. نتیجه این است که یکی از آن ها از کار می افتد. شبیه این که دو نفر بخواهند هم زمان روی یک دکمه کیبورد معنی جدا بگذارند.
تیم jQuery این مشکل را از قبل دیده است. برای همین متد noConflict() را ساخته اند تا کنترل علامت $ را آزاد کنی و بقیه کتابخانه ها هم خوشحال شوند.
متد noConflict در jQuery چیست؟
متد noConflict() استفاده jQuery از علامت $ را رها می کند. یعنی بعد از صدا زدن آن، دیگر $ متعلق به jQuery نیست. پس کتابخانه های دیگر می توانند آزادانه از $ استفاده کنند.
البته این به معنی حذف jQuery نیست. هنوز می توانی با نوشتن jQuery به جای $ از آن استفاده کنی. فقط میان بر کوتاه $ را پس داده ای تا بقیه اسکریپت ها مشکل نداشته باشند.
استفاده از jQuery بدون علامت $
در این مثال، ابتدا noConflict() را صدا می زنیم. سپس همه جا از نام کامل jQuery استفاده می کنیم.
$.noConflict();
jQuery(document).ready(function() {
jQuery("button").click(function() {
jQuery("p").text("jQuery is still working!");
});
});
در این کد، $.noConflict() کنترل $ را آزاد می کند. بعد داخل ready، روی کلیک دکمه، متن همه تگ های <p> عوض می شود. اینجا نشان می دهیم که با نام jQuery، کتابخانه هنوز فعال است.
- کد بالا را در ادیتور باز کن.
- روی دکمه کلیک کن و تغییر متن را ببین.
- کلمه داخل
text()را عوض کن و دوباره تست کن.
ساخت میان بر جدید با noConflict
گاهی دوست داری همچنان از یک میان بر کوتاه استفاده کنی. اما نمی خواهی از $ استفاده شود. در متن منبع، jQuery پیشنهاد می دهد که نتیجه noConflict() را در یک متغیر نگه داری.
تعریف میان بر jq برای jQuery
در این مثال، متغیر jq را به عنوان میان بر جدید نگه می داریم.
var jq = $.noConflict();
jq(document).ready(function() {
jq("button").click(function() {
jq("p").text("jQuery is still working!");
});
});
اینجا متد noConflict() یک ارجاع به jQuery برمی گرداند. ما آن را در متغیر jq ذخیره می کنیم. بعد هر جا لازم باشد، به جای $ از jq استفاده می کنیم. مثل این است که برای یک دوست، اسم مستعار جدید بسازی.
- کد را اجرا کن و روی دکمه کلیک کن.
- نام متغیر
jqرا عوض کن و همه جا اصلاح کن. - اگر یک بار از
$استفاده کنی، تفاوت را بررسی کن.
استفاده محلی از $ داخل یک بلوک
ممکن است یک بلوک بزرگ کد داشته باشی که همه جا از $ استفاده کرده ای. نمی خواهی همه $ ها را به jQuery تغییر دهی. در متن منبع، یک ترفند ساده پیشنهاد شده است.
استفاده محلی از $ با پارامتر تابع
اینجا $ را به عنوان پارامتر به تابع ready می دهیم. درون تابع، $ باز هم همان jQuery است؛ بیرون تابع باید از jQuery استفاده کنی.
$.noConflict();
jQuery(document).ready(function($) {
$("button").click(function() {
$("p").text("jQuery is still working!");
});
});
در این الگو، بیرون از تابع، $ آزاد شده است و jQuery از آن استفاده نمی کند. اما داخل تابع، $ فقط یک نام پارامتر است که به jQuery اشاره می کند. این روش کمک می کند کدهای قدیمی تو بدون تغییر زیاد، همچنان با $ کار کنند.
- کد را در ادیتور اجرا کن.
- داخل تابع، یکی از
$ها را بهjQueryتغییر بده. - سعی کن بیرون تابع از
$استفاده کنی و نتیجه را ببین.
نکته: این ترفند شبیه این است که داخل یک کلاس درس، یک نام مستعار استفاده کنی؛ اما بیرون مدرسه، دیگر کسی آن نام را نمی شناسد.
ارتباط noConflict با بقیه امکانات jQuery
متد noConflict() فقط مسئول مدیریت تداخل میان بر $ است. بقیه متدهای jQuery مثل click() و text() و متدهای AJAX همچنان همان طور کار می کنند. فقط باید به جای $ از نام درست مانند jQuery یا میان بر خودت استفاده کنی.
برای دیدن مثال های بیشتر از AJAX، می توانی صفحه متدهای Get/Post در jQuery را هم ببینی. همچنین برای کار با انتخاب گرها، صفحه فیلترها در jQuery کمک بزرگی است.
اگر خواستی این صفحه را دوباره مرور کنی، لینک متد noConflict در jQuery را در مرورگر بوکمارک کن تا همیشه دم دست باشد.
جمع بندی سریع
- jQuery به طور پیش فرض از
$به عنوان میان بر استفاده می کند. - اگر کتابخانه دیگری هم از
$استفاده کند، ممکن است تداخل ایجاد شود. - متد
noConflict()کنترل$را آزاد می کند تا تداخل برطرف شود. - می توانی از نام کامل
jQueryیا میان بر جدید مانندjqاستفاده کنی. - در یک بلوک کد، می توانی با پارامتر تابع،
$را فقط همانجا برای jQuery نگه داری.