>웹 프론트엔드 >JS 튜토리얼 >jquery 플러그인 충돌(jquery.nocon conflict) 솔루션 Sharing_jquery

jquery 플러그인 충돌(jquery.nocon conflict) 솔루션 Sharing_jquery

WBOY
WBOY원래의
2016-05-16 16:54:471152검색

많은 JS 프레임워크 라이브러리는 $ 기호를 함수 또는 변수 이름으로 사용하며, jQuery가 가장 일반적인 것입니다. jQuery에서 $ 기호는 단지 window.jQuery 개체에 대한 참조일 뿐이므로 $가 삭제되더라도 window.jQuery는 여전히 전체 클래스 라이브러리의 무결성을 보장하는 강력한 뒷받침입니다. jQuery의 API 디자인은 여러 프레임워크 간의 참조 충돌을 완전히 고려합니다. jQuery.noConfluence 메서드를 사용하면 제어를 쉽게 전달할 수 있습니다.

jQuery.noConstrict 메소드에는 $ 참조를 전달할 때 jQuery 객체 자체를 전달할지 여부를 결정하는 선택적 부울 매개변수[1]가 포함되어 있습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.noContribute([removeAll])

기본적으로 noConstrict를 실행하면 $ 변수의 제어가 $를 생성하는 첫 번째 라이브러리로 전송됩니다. RemoveAll이 true로 설정된 경우 noConstrict를 실행하면 $ 및 jQuery 객체 자체의 모든 제어가 이를 생성하는 첫 번째 라이브러리로 전송됩니다. .

예를 들어 KISSY와 jQuery를 혼합하고 $ = KISSY를 사용하여 API 작업을 단순화하는 경우 이 방법을 사용하면 이름 충돌 문제를 해결할 수 있습니다.

그럼 이 메커니즘은 어떻게 구현되나요? jQuery 소스 코드 [2]의 시작 부분을 읽고 가장 먼저 해야 할 일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

// 덮어쓸 경우 jQuery로 매핑
_jQuery = window.jQuery,

// 덮어쓸 경우 $에 매핑
_$ = window.$,

jQuery는 변수가 강제로 덮어쓰이는 것을 방지하기 위해 두 개의 private 변수를 통해 윈도우 환경의 두 개체인 jQuery와 $를 매핑하는 것을 이해하기 쉽습니다. noConfluence 메소드가 호출되면 _jQuery, _$, jQuery, $의 차이점을 사용하여 제어 전송 방법을 결정합니다.

noCon conflict: 기능(깊은) {
                                                                                      > ~ > $는 window.$를 재정의합니다. 현재 jQuery 별칭 $는 유효하지 않지만 jQuery 자체는 그대로 유지됩니다. 다른 라이브러리나 코드가 $ 변수를 재정의하는 경우 해당 변수에 대한 제어가 완전히 이전됩니다. 반면 deep을 true로 설정하면 _jQuery가 window.jQuery를 덮어쓰게 되어 $와 jQuery가 모두 유효하지 않게 됩니다.

이 작업의 장점은 프레임워크 혼합이나 jQuery 다중 버전 공존과 같이 충돌이 심한 실행 환경이더라도 noConfluence 메서드에서 제공하는 핸드오버 메커니즘과 발견되지 않은 jQuery 객체를 반환한다는 사실로 인해 발생한다는 것입니다. , 충돌을 해결하기 위해 변수를 통해 완전히 매핑될 수 있습니다.

그러나 피할 수 없는 사실은 플러그인 오류 및 기타 문제가 발생할 수 있다는 점입니다. 물론 컨텍스트 매개변수만 수정하면 복원할 수 있습니다.




코드 복사

코드는 다음과 같습니다.

var query = jQuery.noConflect(true) ;

(function ($) {

// 플러그인 또는 다른 형태의 코드, 매개변수를 jQuery로 설정할 수도 있습니다})(query);

다음 예도 이 문제를 해결합니다

출생 이후 jQuery 버전이 점점 더 많아지고 있으며 jQuery 공식 웹사이트의 새 버전도 계속 업데이트 및 출시되고 있습니다. 그러나 우리는 이미 이전 프로젝트에서 1.3과 같은 이전 버전의 jQuery를 사용했습니다. .X, 1.4.X, 1.5.X, 1.6.2 등

프로젝트의 필요로 인해 최신 버전의 jQuery를 계속 사용해야 합니다. 그러나 이미 존재하고 채택된 이전 jQuery 버전의 경우 여러 다른 jQuery 버전이 공존하도록 하려면 어떻게 해야 합니까? 같은 페이지 없이 충돌이 발생하면 어떻게 되나요?

실제로 jQuery.noConstrict() 기능을 사용하면 jQuery가 Prototype과 같은 다른 JS 라이브러리와 공존하도록 할 수는 없습니다. 다른 버전의 jQuery와도 충돌 없이 공존할 수 있습니다.

코드 복사 코드는 다음과 같습니다.




   동일한 페이지에 여러 다른 jQuery 버전 로드<br>                                                                                                                           ="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script><br> jQuery_New = $.noContribute(true);<br>                                                                                              > ;script type="text/javascript"><br> var jQuery_1_6_2 = $.noConflect(true);<br> </script><br> ="http://ajax.googleapis.com/ajax/libs /jquery/1.5.2/jquery.min.js"></script><br>                                                      <br> var jQuery_1_5_2 = $.noConflect(true);<br> </script><br> " src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br>  <script type="text/javascript" ><br> var jQuery_1_4_2 = $.noConflect(true);<br> </script><br> /javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery .min.js"></script><br>        <script type="text/ javascript"><br> var jQuery_1_3_2 = $.noConflect(true);<br> </script><br> <script type="text/javascript"><br> 경보(jQuery_New.fn.jquery );<br> 경보(jQuery_1_6_2.fn.jquery);<br> 경보(jQuery_1_5_2.fn.jquery); (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 '버전입니다.</p>').appendTo('body');});<br>                                                                                                            다양한 jQuery 버전<br>                                                </div></a></span> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="JS를 사용하여 포커스 요소 code_javascript 기술 얻기" href="https://m.php.cn/ko/faq/13581.html">JS를 사용하여 포커스 요소 code_javascript 기술 얻기</a></span><span>다음 기사:<a class="dBlack" title="JS를 사용하여 포커스 요소 code_javascript 기술 얻기" href="https://m.php.cn/ko/faq/13583.html">JS를 사용하여 포커스 요소 code_javascript 기술 얻기</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>