jQuery 핵심 - noConflict() 메서드
정의와 사용법
noConflict() 메서드는 변수 $의 jQuery 제어권을 양도합니다.
이 메서드는 jQuery가 $ 변수에 대한 제어를 해제합니다.
이 메서드는 jQuery 변수에 새로운 사용자 정의 이름을 부여하는 데도 사용할 수 있습니다.
ヒント:다른 JavaScript 라이브러리가 함수를 사용할 때 $를 사용할 때 이 메서드가 매우 유용합니다.
문법
jQuery.noConflict(removeAll)
| 파라미터 | 설명 |
|---|---|
| removeAll | 부울 값. jQuery 변수를 완전히 복원할지 여부를 나타냅니다. |
설명
많은 JavaScript 라이브러리는 $를 함수나 변수 이름으로 사용합니다. jQuery도 마찬가지입니다. jQuery에서 $는 jQuery의 별명에 불과하므로, $를 사용하지 않아도 모든 기능을 보장할 수 있습니다. jQuery 이외의 다른 JavaScript 라이브러리를 사용하려면, $.noConflict()를 호출하여 제어권을 돌려줄 수 있습니다:
<script type="text/javascript" src="other_lib.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $.noConflict(); // 다른 라이브러리의 $를 사용하는 코드 </script>
jQuery의 객체에 별명을 부여하기 위해 .ready() 메서드와 함께 사용할 수 있습니다. 이 기술은 매우 효과적입니다:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// jQuery의 $를 사용하는 코드
});
// 다른 라이브러리의 $를 사용하는 코드
</script>
또한, 이 메서드에 true를 전달하여 $와 jQuery의 제어권을 원래 라이브러리에게 돌려주할 수 있습니다. 사용하기 전에 잘 고려해 주세요!
이것은 jQuery의 noConflict 메서드보다 더 극단적인 버전으로, jQuery를 완전히 재정의하는 경우에 일반적으로 사용됩니다. 예를 들어, jQuery를 매우 충돌이 많은 환경에 삽입하려는 경우에 일반적으로 사용됩니다. 주의: 이 메서드를 호출한 후 플러그인이失效할 가능성이 매우 높습니다.
예제
예제 1
$를 참조하는 객체를 원래의 객체로 맵핑합니다:
jQuery.noConflict();
jQuery("div p").hide(); // jQuery 사용
$("content").style.display = "none"; // 다른 라이브러리의 $() 사용
예제 2
별명 $를 다시 사용하면서 함수를 생성하고 실행합니다. 이 함수의 범위에서는 여전히 $를 jQuery의 별명으로 사용합니다. 이 함수는 다른 라이브러리에 의존하지 않는 대부분의 플러그인에 매우 효과적입니다:
jQuery.noConflict();
(function($) {
$(function() {
// $를 jQuery 별명으로 사용하는 코드
});
})(jQuery);
... // $를 별명으로 사용하는 다른 라이브러리의 코드
예제 3
jQuery.noConflict()와 줄임된 ready를 결합하여 코드를 더 깔끔하게 할 수 있습니다:
jQuery.noConflict()(function(){
// jQuery를 사용하는 코드
});
... // 다른 라이브러리에서 $를 별명으로 사용하는 코드
예제 4
다음 라이브러리에서 jQuery 객체를 사용하기 위해 새로운 별명을 만들어 줍니다:
var j = jQuery.noConflict();
j("div p").hide(); // jQuery에 기반한 코드
$("content").style.display = "none"; // 다른 라이브러리에 기반한 $() 코드
예제 5
jQuery를 완전히 새로운 네임스페이스로 이동시키기:
var dom = {};
dom.query = jQuery.noConflict(true);
결과:
dom.query("div p").hide(); // 새로운 jQuery의 코드
$("content").style.display = "none"; // 다른 라이브러리 $()의 코드
jQuery("div > p").hide(); // jQuery의 다른 버전 코드
