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

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 사용하기.

$, $jq, Alias, Argument, callback 함수, Conflict, Example, example code, iife, IIFE 사용하기, immediately invoked function expression, javascript, jQuery, jQuery.noConflict(), js, js library, Library, namespace, noConflict, ready, Sample Code, tutorial, 강좌, 기초 강좌, 라이브러리, 새로운 alias 정의, 예제 코드, 인자 사용, 자바스크립트, 제이쿼리, 충돌, 콜백 함수, 태그를 입력해 주세요., 함수, 해결 방법