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čivanje jQuery-a 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 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>