JQuery 와 Prototype 충돌 방지

JQuery와 prototype에서 $()를 사용하려면 충돌이 일어나 스크립트 오류를 일으킨다.

 

둘다 같은 $()를 쓰니까..

 

이를 해결하는 방법은 아래와 같다.

 

jQuery 와 prototype 을 정의한 아래줄에 다음의 소스를 추가한다.

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

 

위와 같이 정의해두면 jQuery에 대한 $()는 -> j$() 로 대체해서 사용할수 잇게된다.

 

물론 충돌도 일어나지 않는다.

 

++ 하지만! jquery의 다른 라이브러리를 다운로드 받아 사용하려면 해당 라이브러리의 $ 를 j$ 로 모두 바꿔줘야 하는 번거로움이 있다.

이는 스크립트를 가져오는 순서만 잘 나열해주면 바로 해결된다.

 

ex)

<script type="text/javascript" src"./js/jquery-1.6.2.min.js"></script> <!-- jquery 기본 라이브러리 -->
<script type="text/javascript" src="./js/jquery-ui-1.8.16.custom.min.js"></script> <!-- 별도로 다운로드 받은 라이브러리 -->

<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
</script>

<script type="text/javascript" src="./js/prototype.js"></script>

 

이런식으로 jquery를 먼저 로드하고 후에 prototype.js 를 로드하면 둘다 문제 없이 사용할 수 있다.