آموزش جی کوئری – متد noConflict جی کوئری

در بخش قبلی با تکنیک Ajax در جی کوئری آشنا شدیم. در این قسمت از سری جلسات آموزش جی کوئری, قصد داریم حالت No-Confilct را با استفاده از متد noConflict جی کوئری یاد بگیریم.

استفاده از جی کوئری به همراه دیگر کتابخان های جاوا اسکریپت

همانطور که می دانید, jQuery از علامت دلار ($) به عنوان میانبر یا آلیاس برای jQuery است.

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

خوشبختانه, jQuery یک متد خاص به نام noConflict() برای حل مشکل در این شرایط ارایه داده است.

متد noConflict جی کوئری

متد jQuery.noConflict() کنترل شناسه گر $ را به دیگر کتابخانه ها برگشت می دهد.

کد jQuery در مثال زیر (خط ۱۰) جی کوئری را بلافاصله بعد از بارگزاری آن در صفحه به حالت no-Conflict تغییر می دهد و یک نام متغیر جدید $j به جای آلیاس $ را به منظور جلوگیری از تداخل با نمونه اولیه فریمورک, جایگزین می کند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
// Defining the new alias for jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $j("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // Display an alert message when the element with ID bar is clicked
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

<!DOCTYPE html>

<head>

<title>jQuery noConflict() Demo</title>

// Defining the new alias for jQuery

var $j = jQuery.noConflict();

$j(document).ready(function(){

// Display an alert message when the element with ID foo is clicked

$j("#foo").click(function(){

alert("jQuery is working well with prototype.");

});

// Some prototype framework code

document.observe("dom:loaded", function(){

// Display an alert message when the element with ID bar is clicked

$(bar).observe('click', function(event){

alert("Prototype is working well with jQuery.");

});

</script>

</head>

<body>

<button type="button" id="foo">Run jQuery Code</button>

<button type="button" id="bar">Run Prototype Code</button>

</body>

</html>

نکته: بیشتر کتابخانه های جاوا اسکریپت مانند جی کوئری از $ به عنوان تابع یا نام متغیر استفاده می کند, بعضی از این کتابخانه ها mootools, prototype, zepto

به هر حال اگر به دلایلی مثل نداشتن تمایل برای ویرایش نکردن کد جی کوئری خود یا دوست داشتن $ به خاطر آسانی استفاده و ذخیره زمان, نمی خواهید که یک میانبر دیگر برای jQuery تعریف کنید, پس می توانید از یک راه آسان دیگر استفاده کنید.

به اینصورت که $ را به عنوان یک آرگومان به تابع jQuery(document).ready() پاس بدید. مثل این :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    // The dollar sign in here work as an alias to jQuery
    $("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign in the global scope refer to prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

<!DOCTYPE html>

<head>

<title>jQuery noConflict() Demo</title>

jQuery.noConflict();

jQuery(document).ready(function($){

// The dollar sign in here work as an alias to jQuery

$("#foo").click(function(){

alert("jQuery is working well with prototype.");

});

// Some prototype framework code

document.observe("dom:loaded", function(){

// The dollar sign in the global scope refer to prototype

$(bar).observe('click', function(event){

alert("Prototype is working well with jQuery.");

});

</script>

</head>

<body>

<button type="button" id="foo">Run jQuery Code</button>

<button type="button" id="bar">Run Prototype Code</button>

</body>

</html>

بارگزاری jQuery قبل از دیگر کتابخانه ها

راه حل بالا برای جلوگیری از تداخل, بر روی بارگذاری جی کوئری بعد از لود شدن prototype.js تمرکز دارد.

به هرحال, اگر جی کوئری را قبل از دیگر کتابخانه ها لود کنید, شاید نیاز باشد از نام کامل jQuery در کد خود استفاده کنید تا بدون نیاز به صدا زدن jQuery.noConflict() از تداخل جلوگیری کنید.

اما در این سناریو $ همان معنی تعریف شده در دیگر کتابخانه ها را دارد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    // Use full jQuery function name to reference jQuery
    jQuery("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign here will have the meaning defined in prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

<!DOCTYPE html>

<head>

<title>jQuery noConflict() Demo</title>

jQuery(document).ready(function($){

// Use full jQuery function name to reference jQuery

jQuery("#foo").click(function(){

alert("jQuery is working well with prototype.");

});

// Some prototype framework code

document.observe("dom:loaded", function(){

// The dollar sign here will have the meaning defined in prototype

$(bar).observe('click', function(event){

alert("Prototype is working well with jQuery.");

});

</script>

</head>

<body>

<button type="button" id="foo">Run jQuery Code</button>

<button type="button" id="bar">Run Prototype Code</button>

</body>

</html>

امیدوارم در این بخش آموزش جی کوئری, از آموزش متد noConflict جی کوئری نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

لغو پاسخ

داوود ۲ خرداد ۱۴۰۱

سلام اقای حسن شفیعی میخواستم phpرو یادم بدید اینو بگم که phpرو کامل بلدم از مقدماتی تا پیشرفته رو معماری MVC هم مسلط هستم فقظ خواستم اموزش بگونه ایی باشه که شما یه پروزه به من میدید من پیاده سازی کنم و شما اشتباه هات و نواقص من رو بهم میگید اگر قبول کنید به من اموزش بدید من ممنونتون میشم

پاسخ