Làm gì khi jQuery xung đột với các thư viện khác

Khi viết 1 chức năng nào đó trong liên quan đến javascript bạn sẽ không tránh khỏi việc xung đột code giữa jquery với các thư viện, điều này làm bạn tốn thời gian fix lỗi của bạn trong khi bạn viết hoàn toàn đúng sau đây là các cách để giải quyết việc xung đột đó.

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 :

 
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// Your jQuery code here, using the $
})( jQuery );
</script>

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.

 
<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.

Nếu bạn cảm thẩy việc viết như trên hơi khó chịu và thấy nó không thích với mình lắm thì bạn có thể sử dụng cách thứ 2 dưới đây để tránh xung đột xảy ra:

 
<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>

Có vẻ như là code nhìn có vẻ hay hơn ví dụ 1

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.

 
<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>

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 :

 
<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.

Nguyên nhân cũng có thể xảy ra nếu bạn sử dụng jquery ở các trang CDN, nếu dùng ngôn ngữ bình dân là, các bạn ko load thư viện jquery trên host của các bạn mà load trực tiếp từ các trang cung cấp jquery, hoặc là cùng lúc load cả 2, cho dù nó là cùng phiên bản hay khác phiên bản. Ví dụ:

//Begin
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
//End

Cách tốt nhất là kiểm tra lại đường dẫn chính xác không, chỉ nên dùng 1 trong 2 mà thôi. Còn nếu trong trường hợp plugin A sử dụng phiên bản 1.5.1 thì ok, nhưng plugin B phải dùng phiên bản 1.71. thì sao? Đừng lo, chỉ cần bạn sử dụng đoạn code sau, bạn cứ hiểu như là nếu lần đầu sinh còn gái mà cần con trai nối dõi thì sinh lần tiếp theo vậy. Bây giờ các bạn cứ sửa lại đường dẫn đến 2 file jQuery kia thành đường dẫn website của bạn là được. Nhớ là 2 file này phải tồn tại trên host nhé.