jquery noConflict

들어가기

인터넷에서 MIT 라이센스의 bootstrap 테마를 조물락 거리는 중.

Jquery의 $ 별칭이 동작을 안하는 경우가 있었다.

찾아보니 Jquery의 noConflict라는 기능이었다.

1
2
3
4
5
6

$.noConflict();

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

bootstrap 테마의 main.js를 보니 위처럼 전역에 $.noConflict 라는 것이 호출되어 있었고, jquery를 사용할 때 별칭 대신 JQuery키워드로 되어 있었다.

Jquery의 noConflcit

Jquery 라이브러리를 포함해서 다른 자바스크립트 라이브러리에서도 $라는 특수문자를 함수 또는 변수명으로 사용한다. Jquery에서 $ 특수문자는 JQuery의 별칭으로, 별다른 기능이 없다. 따라서 Jquery와 다른 기타 javascript 라이브러리를 사용할 경우, $ 특수문자의 충돌을 대비해서 Jquery에서 $ 특수문자 사용권한을 다른 라이브러리에 위힘하는 것이 $.noConflcit 이다.

1
2
3
4
5
6
7
8
9
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

위 처럼 Jquery와 다른 javascript를 동시에 사용할 경우, 만약 other_lib.js가 $ 특수문자를 내부적으로 사용할 경우, Jquery에서 $사용 권한을 포기할 필요가 있다. 위 처럼 전역 스코프에서 $.noConflict 메소드를 호출하여 권한을 포기하면 other_lib.js에서 $ 특수문자를 사용할 수 있다. 다만 위처럼 Jquery.ready 내부에서 $를 사용할수 있기는 하지만, 이 경우 $ 특수문자가 어디 라이브러리에 속해있는지 햇갈릴수 있어서 별로인 방법같다.

Jquery 두가지 버전을 같이 사용할 경우 noConflict

이런 상황이 있는지는 모르겠으나, 두가지 버전의 Jquery를 동시에 사용해야 할 경우 noConflict를 통해 Jquery 버전을 구별해서 코딩 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.noConflict demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="log">
<h3>Before $.noConflict(true)</h3>
</div>
<script src="https://code.jquery.com/jquery-1.6.2.js"></script>

<script>
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)

jq162 = jQuery.noConflict( true );

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
</script>

</body>
</html>

위 소스를 보면 두개의 Jquery 라이브러리를 동시에 load해서 사용하고 있다. 마지막으로 load된 1.6.2 버전의 Jquery가 뒤에 로드가 되었기 때문에 Jquery에 대한

참고자료

https://www.codingfactory.net/10795 https://api.jquery.com/jquery.noconflict/

많은 자바스크립트 라이브러리들은 사용한다 $ 를 함수 또는 변수명으로, Jquery 에서 하는 것 처럼. Jquery 경우에는, $ 는 Jquery의 별칭일 뿐이다. 따라서 모든 기능은 $ 별칭 없이 유효하다. 만약 당신이 또다른 자바스크립트 라이브러리 를 사용하길 원한다면 Jquery와 같이, $ 키워드의 사용권한을 다른 라이브러리로 되돌려라. $.noConfilct() 를 호출함으로써 Jquery가 초기화 하는 동안 $의 old refereces 들은 저장된다. noconfilct()는 간단히 그것들을 원복 시킨다.

만약 몇가지 이유 때문에 Jquery 두 버전을 로드했을 경우, 두번째 제이쿼리 버전에서 $.noConflict(true)를 호출하는 것은 return 할 것이다. the globally scoped jQuery variables 를 첫번째 제이쿼리의 버전에게