Thông thường , khi sử dụng jQuery chúng ta thường sử dụng kí tự $ ở đằng trước các hàm và biến. Tuy nhiên các thư viện khác như prototype.js, MooTools, hoặc YUI cũng sử dụng kí tự $ này. Và vì thế mà khi chúng ta sử dụng cùng một lúc các thư viện này với jQuery, thì sẽ xảy ra xung đột và phát sinh ra lỗi.
Hôm nay, mình sẽ chia sẻ cho các bạn các cách để có thể giải quyết xung đột khi sử dụng cùng một lúc jQuery và các thư việc js khác.
Cách 1 : Đặt jQuery vào chế độ No-Conflict Mode
Khi đặt jQuery vào chế độ no-conflict, bạn sẽ có thể thay thế kí tự $ ở đằng trước bằng các kí tự khác.
<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
Trong đoạn code trên, kí tự $ đã được thay thế bởi $j, do đó sẽ giúp cho chúng ta tránh trùng lắp với các thư viện khác sử dụng kí tự $ ở đằng trước.
Cách 2 : Sử dụng $ như là một tham số
Nếu bạn không thích với cách 1 là thay thế dấu $ ở đằng trước, thì bạn có thể làm theo như cách sau :
<!-- Another way to put jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// You can use the locally-scoped $ in here as an alias to jQuery.
$( "div" ).hide();
});
// The $ variable in the global scope has the prototype.js meaning.
window.onload = function(){
var mainDiv = $( "main" );
}
</script>
Bằng cách chèn dấu $ như là một tham số vào hàm jQuery( document ).ready(), bạn sẽ tránh được xung đột giữa jQuery và các thư viện khác.
Cách 3 : Chèn khai báo jQuery đứng trước các thư viện khác.
Nếu bạn chèn jQuery trước những thư viện khác, bạn sẽ có thể sử dụng jQuery khi bạn làm việc với thư viện jQuery , nhưng kí tự $ sẽ được dùng cho các thư viện khác.
<!-- Loading jQuery before other libraries. -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use full jQuery function name to reference jQuery.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>
Cách 4 : Sử dụng cách gọi trực tiếp
Với cách này, các bạn vẫn có thể sử dụng dấu $ như mặc định, và cũng không cần phải đặt jQuery trước các thư viện khác, chỉ đơn giản sử dụng như sau :
<!-- Using the $ inside an immediately-invoked function expression. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script>
Với 4 cách mà mình chia sẻ cho các bạn trong bài viết này là những cách mà mình thấy hữu hiệu và thường xuyên áp dụng khi mình cũng gặp các sự cố xung đột. Tuy nhiên sẽ còn có nhiều cách khác và nếu các bạn biết thì đừng quên chia sẻ cho mình và mọi người đều biết dưới dạng comments nhé.