noConflict를 사용해서 jQuery와 다른 라이브러리 충돌 없이 함께 사용하기 > jquery

출처 : 코드팩토리 (noConflict를 사용해서 jQuery와 다른 라이브러리 같이 사용하기)

한 웹페이지에 여러 자바스크립트 라이브러리를 사용하는 경우 $ 변수가 충돌하는 경우가 발생한다.

이러한 이유료 jQuery에서는 jQuery.noConflict() 메서드를 통하여 이 문제를 피할 수 있게 하고 있다.

<script src="다른 자바스크립트 라이브러리"></script>
<script src="jQuery 라이브러리"></script>
<script>
	$.noConflict();     // $ 변수에 대한 제어권을 포기
	// 이제 다른 자바스크립트 라이브러리를 사용한 코드에서는
	// $ 변수를 사용하고 jQuery 에서는 jQuery 객체를 사용
</script>

$.noConflict()는 jQuery 라이브러리가 불려진 직후 실행되기 때문에 이때까지는 $ 변수에 대한 제어권을 jQuery가 가지고 있지만 해당 메서드의 실행후 $ 변수에 대한 제어권을 포기하게 된다.

하지만 $변수에 대한 제어권을 포기한 이후에도 다른 라이브러리와 충돌 없이 사용할 수 있는 방법들이 있다.

jQuery.noConflict();

jQuery(document).ready(function($) {
	// 이 함수 안에서는 $를 jQuery가 사용
});
// 바깥에서는 $를 다른 라이브러리가 사용

.ready() 메서드가 콜백함수에게 jQuery 객체를 인자로 넘겨주고, 그 인자를 받아 함수범위 안에서 $ 변수를 jQuery 객체로 사용

jQuery.noConflict();

(function($) {
	// 이 함수 안에서는 $를 jQuery가 사용
})(jQuery);
// 바깥에서는 $를 다른 라이브러리가 사용

스스로 실행되는 익명함수를 만들고 jQuery 객처릴 인자로 넘겨준 다음, 그 인자를 받아 함수범위 안에서 $ 변수를 jQuery 객체로 사용

========================================

※프레임워크 충돌 방지

jQuery이외에도 여러 자바스크립트 프레임워크가 있습니다.여러 프레임워크를 함께 사용할 때는 프레임워크 간 충돌이 발생할 수 있습니다.

jQuery이외에 자주 사용하는 Prototype프레임워크에서도 지금까지와 마찬가지로 식별자 $를 사용합니다. 따라서 jQuery프레임워크와 Prototype프레임워크를 함께 사용하면 프레임워크 간에 충돌이 발생합니다.

여러가지 프레임워그를 공용해서 사용하는 경우는 많으므로 간단하게 정리합시다. 충돌을 방지할 때 사용하는 메서드 $.noConflict()입니다. .noConflict()메서드를 사용하면 더 이상 jQuery의 식별자 $를 사용할 수 없습니다.

1 <script language="javascript">
2 <!--
3     $.noConflict();
4     jQuery(document).ready(function(){
5
6     });
7 //-->
8 </script>

따라서 조금 길지만 위에 내용처럼 식별자 jQuery를 사용해야 합니다.

" 계속 쓰는 녀석인데 너무 길어요! "

간단하게 쓰고 싶다면 jQuery객체를 다른 변수에 저장해서 사용하세요.

1 <script language="javascript">
2 <!--
3     //플러그인 간의 충돌을 제거합니다.
4     $.noConflict();
5     var J = jQuery;
6
7
8     //jQuery를 사용합니다.
9
10     J(document).ready(function(){
11         J('h1').removeClass('high_light')
12
13     });
14
15 //-->
16 </script>