jQuery_jquery의 충돌 방지 함수 구현 원칙 분해

WBOY
풀어 주다: 2016-05-16 16:16:06
원래의
1161명이 탐색했습니다.

jQuery에서 nocon conflict는 변수 충돌을 방지하고 변수 제어를 해제하는 데 사용되는 중요한 방법입니다. 우리는 jQuery가 외부 세계에 두 개의 전역 변수인 $와 jQuery를 제공한다는 것을 알고 있습니다. jQuery는 두 개의 전역 변수만 생성하지만 충돌은 드문 경우에만 발생합니다. 그러나 웹 페이지에 더 많은 클래스 라이브러리가 포함되어 있으면 자동으로 A 충돌이 발생합니다. $를 정의하거나 jQuery 전역 변수가 존재할 때 발생합니다.

jQuery에서 제공하는 nocon conflict 기능은 변수 충돌 문제를 매우 잘 해결합니다. $ 충돌이든 jQuery 충돌이든 해결이 가능합니다. 다음으로 jQuery의 충돌 처리를 분석해 보겠습니다.

먼저 jQuery 소스 코드에서 충돌 없음 구현을 살펴보겠습니다.

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)

로그인 후 복사


여기서 jQuery.extend는 jQuery의 정적 속성을 확장하는 방법입니다. 이는 jQuery에 noConfluence 메서드를 직접 첨부하는 것으로 볼 수 있습니다. 익명 함수 내에서 내부 변수 _jQuery 및 _$를 각각 정의하여 window.jQuery 및 window.$를 저장합니다. 이 목적은 jQuery가 실행되기 전에 내부 변수를 사용하여 이 두 전역 변수의 상태를 저장하는 것입니다. 나중에 사용할 수 있습니다. 이 두 변수는 충돌 방지 작업에서 복원됩니다. noConstrict는 두 변수 $와 jQuery 사이의 충돌을 처리할 수 있으며, 기본적으로 $를 처리합니다. true 매개변수가 전달되면 jQuery 충돌이 처리됩니다.
window.$ === jQuery는 전역 변수가 jQuery와 같은지 확인하는 데 사용됩니다. 동일한 경우 전역 변수 $는 jQuery가 실행되기 전에 변수로 복원됩니다(내부 변수 _$에 저장됨). window.jQuery === jQuery 심층 충돌 처리가 활성화되고 전역 변수 jQuery가 내부 jQuery와 동일하면 전역 jQuery가 이전 상태로 복원됩니다. window.$ === jQuery 및 window.jQuery=jQuery를 판단하는 의미는 다음 코드와 같이 정의된 변수가 덮어쓰여지지 않도록 보호하는 것입니다.

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断,那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上,如果没有判断window.jQuery===jQuery,重新定义的jQuery就会被undefined覆盖。

로그인 후 복사

전체 작업 과정은 아래 그림과 같습니다.

noConstrict는 jQuery 라이브러리 내부에서 jQuery 생성자를 반환합니다. $!

처럼 사용하세요.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿