Bagaimana jika ingin menggunakan kerangka kerja lain di halaman web kita, saat masih menggunakan jQuery?
jQuery dan Kerangka JavaScript Lainnya
Seperti yang sudah diketahui: jQuery menggunakan tanda $ sebagai jalan pintas untuk jQuery.
Ada banyak framework JavaScript populer lainnya seperti: Angular, Backbone, Ember, Knockout, dan banyak lagi.
Bagaimana jika kerangka kerja JavaScript lain juga menggunakan tanda $ sebagai pintasan?
Jika dua kerangka kerja berbeda menggunakan pintasan yang sama, salah satunya mungkin berhenti berfungsi.
Tim jQuery telah memikirkan hal ini dan menerapkan metode noConflict().
Metode jQuery noConflict ()
Metode noConflict() berfungsi untuk melepaskan penangguhan pada $ shortcut identifier, sehingga skrip lain dapat menggunakannya.
Kita tentu saja masih bisa menggunakan jQuery, cukup dengan menulis nama lengkapnya, bukan pintasannya:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); </script> </head> <body> <p>Ini Paragraph.</p> <button>Test jQuery</button> </body> </html>
Ketika button “Test jQuery” di tekan, maka output yang akan di hasilkan akan seprti di bawah ini :
Kita juga dapat membuat pintasan sendiri dengan sangat mudah. Metode noConflict() mengembalikan referensi ke jQuery, yang dapat disimpan dalam variabel untuk digunakan nanti. Berikut ini contohnya:
Contoh :
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); }); </script> </head> <body> <p>Ini Paragraph.</p> <button>Test jQuery</button> </body> </html>
Ketika button “Test jQuery” di tekan, maka output yang akan di hasilkan akan seprti di bawah ini :
Jika kita memiliki blok kode jQuery yang menggunakan $ shortcut dan kita tidak ingin mengubah semuanya, kita bisa meneruskan $ sign in sebagai parameter ke metode siap. Ini memungkinkan kita untuk mengakses jQuery menggunakan $, di dalam fungsi ini – di luarnya, kita harus menggunakan “jQuery”:
Contoh :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});
</script>
</head>
<body>
<p>Ini Paragraph.</p>
<button>Test jQuery</button>
</body>
</html>
Ketika button “Test jQuery” di tekan, maka output yang akan di hasilkan akan seprti di bawah ini :
