jQuery - No-Conflict Mode


Korištenje jQuery-a s ostalim JavaScript bibliotekama

Kao što već znate, jQuery koristi znak dolara ($) kao prečicu ili alias za jQuery. Zbog toga, ako koristite drugu JavaScript biblioteku koja takođe koristi znak $ kao prečicu, zajedno s jQuery bibliotekom na istoj stranici, mogu se dogoditi sukobi. Srećom, jQuery nudi posebnu metodu pod nazivom noConflict() za rješavanje takve situacije.



jQuery noConflict() metoda

jQuery metoda jQuery.noConflict() vraća kontrolu $ identifikatora nazad u druge biblioteke. Kod jQuery-a u sljedećem primjeru staviće jQuery u način bez sukoba odmah nakon što se učita na stranicu i dodijeliti novo ime varijable $j da zamijeni pseudonim $ kako bi se izbjegli sukobi.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stavljanje jQuery u način bez sukoba pomoću nove prečice</title>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Definiranje novog zamjenskog imena za jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Prikazivanje poruke upozorenja kada se klikne element s ID-om foo
    $j("#foo").click(function(){
        alert("jQuery dobro radi s prototipom.");
    });
});
 
// Neki prototip kod framework-a
document.observe("dom:loaded", function(){
    // Prikazivanje poruke upozorenja kada se klikne na element s ID bar
    $(bar).observe('click', function(event){
        alert("Prototip dobro radi s jQuery-jem.");
    });
});
</script>
</head>
<body>
  <p>Kliknite na dugme da biste provjerili rade li jQuery biblioteka i Prototype JavaScript bez sukoba ili ne.</p>
    <button type="button" id="foo">Pokreni jQuery kod</button>
    <button type="button" id="bar">Pokreni Prototype kod</button>
</body> 
</html>

Međutim, ako ne želite definisati drugu prečicu za jQuery, možda zato što ne želite mijenjati svoj postojeći jQuery kod ili stvarno volite koristiti $, jer štedi vrijeme i jednostavan je za upotrebu, tada možete usvojiti drugi brzi pristup. Jednostavno dodajte $ kao argument svojoj jQuery funkciji jQuery(document).ready(), poput ove:

<!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>
jQuery.noConflict();
jQuery(document).ready(function($){
    // Znak dolara ovdje djeluje kao zamjensko ime za jQuery
    $("#foo").click(function(){
        alert("jQuery dobro radi s prototype-om.");
    });
});
 
// Neki prototype framework kod
document.observe("dom:loaded", function(){
    // Znak dolara u globalnom opsegu odnosi se na prototip
    $("bar").observe("click", function(event){
        alert("Prototype dobro radi s jQuery-jem.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Pokreni jQuery kod</button>
    <button type="button" id="bar">Pokreni Prototype kod</button>
</body> 
</html>


Uključujući jQuery prije ostalih biblioteka

Prethodna rješenja za izbjegavanje sukoba oslanjaju se na jQuery koji se učitava nakon učitavanja prototype.js. Međutim, ako uključite jQuery prije ostalih biblioteka, možete koristiti puno ime jQuery u svom jQuery kodu kako biste izbjegli sukobe bez pozivanja jQuery.noConflict(), ali u ovom scenariju $ će imati značenje definisano u drugoj biblioteci.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Izbjegavanje sukoba prilikom uključivanja jQuery-ja prije druge biblioteke</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script>
jQuery(document).ready(function($){
    // Koristite puno ime funkcije jQuery za referencu na jQuery
    jQuery("#foo").click(function(){
        alert("jQuery dobro radi s prototype.");
    });
});
 
// Neki prototype framework kod
document.observe("dom:loaded", function(){
    // Znak dolara ovdje će imati značenje definirano u prototype 
    $(bar).observe('click', function(event){
        alert("Prototype dobro radi s jQuery-jem.");
    });
});
</script>
</head>
<body>
  <p>Kliknite na dugme da biste provjerili rade li jQuery biblioteka i Prototype JavaScript bez sukoba ili ne.</p>
    <button type="button" id="foo">Pokreni jQuery kod</button>
    <button type="button" id="bar">Pokreni Prototype kod</button>
</body> 
</html>