jQuery의 충돌 방지 메커니즘

jQuery의 충돌 방지 메커니즘
작성자: 나라의 훌륭한 사람 |시간: 2013-03-12 11:33
많은 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);

[1] http://api.jquery.com/jQuery.noConflict/#jQuery-noConflict-removeAll [2] https://github.com/jquery/jquery/blob/master/src/core.js
태그: jQuery
주소: http://ued.taobao.com/blog/2013/03/jquery-noconflict/