JQuery 공식 학습 자료: 다른 라이브러리와의 충돌 방지

다른 라이브러리와의 충돌 방지

JQuery 라이브러리와 모든 플러그인은 jQuery 이름 공간에 포함되어 있습니다. 일반적인 규칙으로 전역 대상은 jQuery의 이름 공간에 저장되기 때문에 jQuery와 다른 라이브러리 간의 충돌을 얻지 못합니다. (예:prototype.js, MooTools, Yui)
주의해야 할 것은 기본적으로 $기호를 jQuery의 줄임말로 사용할 수 있다는 것이다.만약 다른 자바스크립트 라이브러리를 사용하고 $기호를 사용한다면 실행할 때 충돌이 발생할 수 있습니다.이러한 충돌을 방지하려면 JQuery를 충돌 없음 모드로 설정해야 합니다.
 

충돌 없음 모드 설정

충돌하지 않는 모드로 JQuery를 설정하려면 $기호 대신 새 변수를 지정해야 합니다.<!-- --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $j = jQuery.noConflict(); // $j jQuery ; 。 $j(document).ready(function() { $j( "div" ).hide(); }); // $ document.getElementById() . mainDiv DOM , jQuery 。 window.onload = function() { var mainDiv = $( "main" ); } </script>위의 코드에서 $는 원래 라이브러리에서 의미를 회복합니다.프로그램의 나머지 부분에서 jQuery를 전체 기능 이름과 새로운 별명으로 사용할 수 있습니다. $J.새 별명은 원하는 이름으로 명명될 수 있습니다.예를 들어, JQ$J, awesomeQuery 등이 있습니다.
마지막으로, 완전한 jQuery 함수 이름을 대체하는 다른 방법을 정의하고 싶지 않으면, $를 매개 변수로 jQuery (document) 에 추가하면 됩니다.ready () 함수, 이것은 다른 라이브러리와 충돌하지 않도록 가장 자주 사용하는 방법입니다.<!-- --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); jQuery( document ).ready(function( $ ) { // $ JQuery 。 $( "div" ).hide(); }); // $ prototype.js . window.onload = function(){ var mainDiv = $( "main" ); } </script>더 적은 코드로 완전한 호환을 실현하는 것이 가장 이상적인 해결 방안일 수도 있다.
 

다른 라이브러리 앞에서 JQuery 참조

위의 코드 세션은prototype에 있습니다.js를 로드한 후 jQuery를 로드합니다.만약 jQuery가 다른 라이브러리에 인용되기 전에, jQuery를 사용하면 작업을 할 때 $기호가 다른 라이브러리에 정의된 의미를 사용할 수 있습니다.여기는 jQuery를 호출할 필요가 없습니다.noConflict()는 $기호를 포기합니다.<!-- JQuery --> <script src="jquery.js"></script> <script src="prototype.js"></script> <script> // JQuery 。 jQuery( document ).ready(function() { jQuery( "div" ).hide(); }); // $ prototype.js window.onload = function() { var mainDiv = $( "main" ); }; </script> 

JQuery 함수를 인용하는 여러 방식

다음 방법은 JQuery 함수를 인용하여 다른 라이브러리에서 충돌하는 변수 $를 만들었을 때 참조할 수 있습니다.
 

새 별칭 만들기

이 jQuery.noConflict () 함수는 JQuery 함수 인용을 되돌려줍니다. 그러면 원하는 변수를 포착할 수 있습니다.<script src="prototype.js"></script> <script src="jquery.js"></script> <script> var $jq = jQuery.noConflict(); </script> 

즉시 호출된 함수 표현식 사용

코드를 포장하기 위해 표준 $기호를 계속 사용할 수 있으며, 함수 표현식을 즉시 호출할 수 있습니다. 이것은 jQuery 플러그인이 만든 표준 모드입니다. 이 모드에서 작가는 $의 표준 모드를 초과한 라이브러리를 사용할지 여부를 알 수 없습니다.<!-- $ --> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function( $ ) { // $。 })( jQuery ); </script>이 기술을 사용하면, 내부의 프로토타입을 사용할 함수를 즉시 호출할 수 없습니다.js 방법.
 

매개 변수를 사용하여 jQuery(document)에 전달합니다.ready() 함수

<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(document).ready(function( $ ) { // $。 }); </script>또는 보다 간결한 구문을 사용합니다.<script src="jquery.js"></script> <script src="prototype.js"></script> <script> jQuery(function($){ // $。 }); </script>