본문 바로가기
프로그래밍 놀이터/Web

[jQuery/Tutorial] jQuery 와 다른 JS Library 함께 쓰기 ( noConflict 함수 )

by 돼지왕 왕돼지 2013. 7. 15.
반응형



 jQuery와 다른 JS Library 함께 쓰기 ( noConflict )

 


[jQuery/Tutorial] jQuery 와 다른 JS Library 함께 쓰기 ( noConflict 함수 )


[이전강좌] $(document).ready() 와 $(window).load() 의 차이.


jQuery 는 해당 library 를 사용을 위한 namespace 로 "jQuery" 를 지정했고, 

$ 를 그 alias 로 지정해놓았다.

하지만 다른 유명한 JS Library 들도 $ 를 namespace alias 로 사용하는 경우가 있어

jQuery 와 다른 library 사이에 충돌이 일어나는 경우가 있다.


충돌이 일어나면, 내가 현재 사용하는 $ 가 어떤 library 에 귀속되는 녀석인지 판별하기가 어렵다.

그래서 가능하면 한 개의 library 로 해결할 수 있다면 다른 library 를 함께 사용하는 것은 비추되고 있다.

Conflict(충돌)도 문제이지만, library 가 늘어남에 따라 더 긴 loading 시간을 요구하기 때문이다.


여튼 충돌이 발생하면, "jQuery.noConflict()" 함수를 사용해서 문제를 해결할 수 있는데, 

이에 대한 적용 방법은 크게 3가지가 있다.




 새로운 alias 정의하기


var $jq = jQuery.noConflict();


위와 같이 $jq 라는 새로운 alias 를 지정하여 $ 대신 $jq 를 사용하면 된다.

물론 위의 경우는 예제이고, $abc, newjQueryAlias 등 다른 이름을 사용해도 무방하다.









 IIFE 사용하기


IIFE 는 Immediately Invoked Function Expression 의 약자로, 

함수를 정의하면서 바로 사용하는 자바 스크립트의 특징 있는 함수 중 하나이다.


IIFE 를 사용하면서 해당 function 으로 jQuery 를 전달하고, IIFE 는 이를 $ 로 받는다.

그럼 Local scope 로 $ 를 jQuery에 대한 alias 로 사용할 수 있다.


jQuery.noConflict();

(function($){

// jQuery 문..

})( jQuery );






 jQuery(document).ready() 의 argument 이용


jQuery(document).ready 의 reference 문서를 보면, 

ready 함수는 인자로 받는 callback 함수에 global jQuery reference 를 전달하는 것으로 표기되어 있다.

 따라서 다음과 같이 사용할 수 있다.


jQuery(document).ready( function($){

// jQuery 문...

});


[다음강좌] DOM의 Attributes 사용하기.


반응형

댓글0