Hướng dẫn jquery tránh xung đột với thư viện khác

Tránh xung đột với thư viện khác (Avoiding Conflicts with Other Libraries )



Về cơ bản thì jquery là một thư viện cái này ai cũng hiểu và gần như tất cả mọi cái của nó đều là các plugins được nằm trong jQuery namespace. Như một quy tắc thông thường khi mọi cái được viết chung thì nó rất dễ bị xung đột. Một số thư viện khác nhau sẽ xung đột với nhau. Vì vậy bài viết dưới đây sẽ giúp bạn tránh các xung đột không cần thiết đó.

Mặc định thì bạn hay dùng $() hoặc $ nhưng nó là dạng viết gọn của jquery() mà thôi. Tuy nhiên xảy ra trường hợp nếu có một thư viện nào đó mà cũng dùng $() thì điều đó sẽ xảy ra lỗi xung đột ngay. Lúc đó thì có mà cực đau đầu không hiểu lí do vì sao.

Thêm jQuery.noConflict() tránh bị xung đột
Như ví dụ dưới đây bạn để ý chỗ mình bôi màu nhé.

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

<!-- 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>
Có vẻ như là code nhìn có vẻ hay hơn ví dụ 1
Thêm thư viện jQuery trước các thư viện khác
Như ví dụ dưới đây bạn sẽ thêm thư viện jquery vào trước prototype.js nhưng hãy sử dụng Jquery() thay vì sử dụng $() để tránh xung đột vẫn có thể xảy ra

<!-- 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>
Tổng kết:
Với những cách đươc nêu ra ở trên rất mong rằng các bạn sẽ tránh được các xung đột cơ bản khi sử dụng nhiều thư viện javascript cùng một lúc để đạt được cái bạn mong muốn.

Nguồn: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-p3-tranh-xung-dot-voi-thu-vien-khac/