jQuery_jquery의 noContribute() 사용 분석 예

이 기사의 예에서는 jQuery에서 noContribute()의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

jQuery는 기본적으로 "$" 연산자를 사용합니다. $ 기호는 단지 window.jQuery 객체인 jQuery.noConflect()에 대한 참조일 뿐입니다. 이 함수는 $ 변수의 제어를 이를 구현하는 첫 번째 라이브러리로 전송합니다. 이는 jQuery가 다른 라이브러리의 $object와 충돌하지 않도록 하는 데 도움이 됩니다. 이 함수를 실행한 후에는 jQuery 변수를 사용하여 jQuery 객체에만 액세스할 수 있습니다. 예를 들어 $("div p")를 사용하는 경우 jQuery("div p")로 바꿔야 합니다.

1. "$" 연산자

1. jQuery는 기본적으로 "$" 연산자를 사용하며, 프로토타입 등 다른 프레임워크도 "$"를 사용합니다. 따라서 다른 라이브러리 이후에 jQuery가 도입되면 jQuery는 "$" 사용 권한을 얻게 됩니다. 이 상황은 이해하기 쉽습니다. 결국 JS는 위에서 아래로 실행됩니다.

2. "$"를 사용하는 다른 라이브러리보다 먼저 jQuery가 도입되면 jQuery는 "$"를 차지하지 않습니다.

팁: 이 방법은 다른 JavaScript 라이브러리가 해당 기능에 $를 사용할 때 유용합니다.

우리는 모두 jquery에서 변수를 가져올 때 $를 사용하지만 $ 기호를 동시에 참조하려는 경우 이를 방지하기 위해 jquery에서 도입한 문제가 발생합니다. 충돌 없음()

2. jQuery.noContribute의 정의

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

jQuery.noConflict([removeAll])

기능 설명:

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

3. jQuery.no충돌 소스코드 분석

jQuery 소스 코드 시작 시 가장 먼저 해야 할 일은 다음과 같습니다.

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

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

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가 공존하는 등 충돌이 심한 실행 환경이든, noConfluence 메서드에서 제공하는 핸드오버 메커니즘과 발견되지 않은 jQuery 객체의 반환으로 인해 작업을 수행할 수 있다는 것입니다. 변수 매핑을 통해 완전히 해결됩니다.

4. jQuery.noConfluence 인스턴스

1. $가 참조하는 객체를 원래 객체에 다시 매핑합니다.

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $() 

2. $ 별칭 사용을 복원한 다음 함수를 생성 및 실행하고 이 함수 범위에서 $를 jQuery의 별칭으로 계속 사용합니다. 이 함수에서는 원래 $ 객체가 유효하지 않습니다. 이 기능은 다른 라이브러리에 의존하지 않는 대부분의 플러그인에서 잘 작동합니다.

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3. jQuery.noConstrict()를 축약형 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 的代码

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.