jquery 플러그인 충돌 (jquery.noconflict) 해결 방법 공유

많은 JS 프레임워크 라이브러리에서 $기호를 함수나 변수 이름으로 사용하는데, jQuery는 그 중에서 가장 전형적인 것이다.jQuery에서 $기호는 window입니다.jQuery 대상의 인용입니다. $가 삭제되더라도 window.jQuery는 여전히 전체 라이브러리의 완전성을 보장하는 튼튼한 뒷받침이다.jQuery의 API 디자인은 다중 프레임워크 간의 인용 충돌을 충분히 고려했기 때문에 우리는 jQuery를 사용할 수 있다.noConflict 방법으로 제어권 전환을 쉽게 실현할 수 있습니다.
jQuery.noConflict 방법에는 $참조를 인계하는 동시에 jQuery 객체 자체를 인계할지 여부를 결정하는 선택할 수 있는 부울 매개 변수가 포함되어 있습니다[1].

 
  
jQuery.noConflict([removeAll]) 
  
 
 

기본적으로 noConflict를 실행하면 $변수 제어권을 $생성된 첫 번째 라이브러리에 넘깁니다.removeAll이true로 설정되었을 때, noConflict를 실행하면 $와 jQuery 대상 자체의 제어권을 첫 번째 라이브러리에 넘깁니다.
예를 들어 KISSY와 jQuery를 혼용하고 $= KISSY를 관용하여 API 조작을 간소화할 때 이 방법을 통해 명칭 충돌 문제를 해결할 수 있다.
그렇다면 이 메커니즘은 어떻게 실현되었을까?jQuery 원본의 시작을 읽는다[2]. 가장 먼저 하는 일은 다음과 같다.

 
  
// Map over jQuery in case of overwrite 
  
_jQuery = window.jQuery, 
  
 
  
// Map over the $ in case of overwrite 
  
_$ = window.$, 
  
 
 

쉽게 이해할 수 있는 것은, jQuery는 두 개의 개인 변수를 통해 window 환경에서 jQuery와 $두 개의 대상을 비추어 변수가 강제로 덮어쓰지 않도록 합니다.noConflict 메서드가 호출되면jQuery, _$, jQuery, $4자 간의 차이로 제어권의 이관 방식을 결정합니다. 구체적인 코드는 다음과 같습니다.
noConflict: function( deep ) {                if ( window.$ === jQuery ) {                        window.$ = _$;                }                if ( deep && window.jQuery === jQuery ) {                        window.jQuery = _jQuery;                }                return jQuery;} 위에서 말한 매개 변수 설정 문제를 다시 보십시오. 만약 deep이 설정하지 않았다면 $window.$덮어쓰기,이 때 jQuery 별명 $은 효력을 상실했지만, jQuery 자체는 손상되지 않았습니다.만약 다른 라이브러리나 코드가 $변수를 다시 정의한다면, 제어권은 완전히 넘겨집니다.반대로 deep이true로 설정되면jQuery가 window를 덮어씁니다.jQuery, $및 jQuery가 효력을 상실합니다.
이러한 조작의 장점은 프레임워크 혼용이든 jQuery 멀티버전이든 고도의 충돌이 공존하는 실행 환경이든 noConflict 방법이 제공하는 이관 메커니즘과 그 자체가 덮어쓰지 않은 jQuery 대상을 되돌려주기 때문에 변수 매핑을 통해 충돌을 완전히 해결할 수 있다는 것이다.
그러나 플러그인의 실효 등 문제를 피할 수 없습니다. 물론 상하문 파라미터를 간단하게 수정하면 $별명을 복구할 수 있습니다.

 
  
var query = jQuery.noConflict(true); 
  
(function ($) { 
  
//           ，         jQuery 
  
})(query); 
  
 
 

아래의 예는 마찬가지로 이 문제를 해결한 것이다
jQuery가 탄생한 이래로 버전이 점점 많아지고 jQuery 홈페이지의 새로운 버전은 끊임없이 업데이트되고 발표되고 있다. 그러나 우리는 이전 프로젝트에서 이미 낡은 버전의 jQuery를 사용했다. 예를 들어 이미 등장한:1.3.X、1.4.X、1.5.X, 1.6.2 등등.
프로젝트의 수요로 인해 반드시 비교적 새로운 버전의 jQuery를 끊임없이 사용해야 한다. 그러나 원래 존재하고 이미 채택된 낡은 jQuery 버전에 대해 우리는 어떻게 여러 개의 서로 다른 jQuery 버전이 같은 페이지에서 병존하고 충돌하지 않도록 합니까?
사실, jQuery를 이용해서.noConflict () 특성은 jQuery를 다른 JS 라이브러리와 병존시킬 수 있을 뿐만 아니라, 예를 들어Prototype과 병존시킬 수 있습니다.jQuery 자체의 다른 버전과 충돌하지 않고 병존할 수도 있습니다.

 
  
 
  
 
  
     
  
         
  
         
  
         
  
         
  <br>            var jQuery_New = $.noConflict(true); 
  <br>         
  
         
  
         
  
         
  <br>            var jQuery_1_6_2 = $.noConflict(true); 
  <br>         
  
         
  
         
  
         
  <br>            var jQuery_1_5_2 = $.noConflict(true); 
  <br>         
  
         
  
         
  
         
  <br>            var jQuery_1_4_2 = $.noConflict(true); 
  <br>         
  
         
  
         
  
         
  <br>            var jQuery_1_3_2 = $.noConflict(true); 
  <br>         
  
         
  <br>            alert(jQuery_New.fn.jquery); 
  <br>            alert(jQuery_1_6_2.fn.jquery); 
  <br>            alert(jQuery_1_5_2.fn.jquery); 
  <br>            alert(jQuery_1_4_2.fn.jquery); 
  <br>            alert(jQuery_1_3_2.fn.jquery); 
  <br> 
  <br>            jQuery_New(function($){$('<p>     '+$.fn.jquery+'       。</p>').appendTo('body');}); 
  <br>            jQuery_1_6_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');}); 
  <br>            jQuery_1_5_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');}); 
  <br>            jQuery_1_4_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');}); 
  <br>            jQuery_1_3_2(function($){$('<p>  '+$.fn.jquery+'       。</p>').appendTo('body');}); 
  <br>         
  
     
  
     
  
                      jQuery