다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기 - $.noConflict();

Query를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두가지로 구분할 수 있습니다.

1. 다른 라이브러리와 충돌
2. 다른 버전의 jQuery와 충돌

//  내 경우엔 플러그인 두개를 쓰려고했더니 각각의 jquery 가 조금 달라? 충돌이 일어났다.

각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다.

다른 라이브러리와 충돌

jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다.

이를 방지하는 방법은 jQuery에서 $를 alias로 사용하지 않도록 하는 것입니다.

$.noConflict();

또는

jQuery.noConflict();

를 넣으면 $를 다른 라이브러리가 사용하고, jQuery 코드를 만들 때는 $ 대신 jQuery를 사용합니다.

만약 계속해서 $를 사용하고 싶다면 다음과 같이 합니다.

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // AAA
});
// BBB

AAA에서는 jQuery가 $를 사용하고, BBB에서는 다른 라이브러리가 $를 사용합니다.

jQuery의 alias를 다른 것으로 만드는 방법도 있습니다.

var jb = jQuery.noConflict();

위와 같이 하면 $ 대신 jb를 jQuery의 alias로 사용합니다.

jb( 'p' ).addClass( 'abc' );

다른 버전의 jQuery와 충돌

흔한 경우는 아니지만 여러 버전의 jQuery를 사용하는 경우가 있습니다. 이런 경우 충돌을 방지하는 방법은 버전별로 alias를 따로 만들어 주는 것입니다.

<script src='jquery-1.11.1.js'></script>
<script>
  var jb = jQuery.noConflict();
</script>
<script src='jquery-2.1.1.js'></script>
<script>
  var hs = jQuery.noConflict();
</script>

1.11.1을 사용할 때는 jb를, 2.1.1을 사용할 때는 hs를 alias로 사용합니다.