>웹 프론트엔드 >JS 튜토리얼 >jquery 버전 conflicts_jquery를 해결하는 효과적인 방법

jquery 버전 conflicts_jquery를 해결하는 효과적인 방법

WBOY
WBOY원래의
2016-05-16 16:38:041444검색

jQuery를 사용해 본 친구들은 서로 다른 버전의 jQuery가 충돌을 일으킬 수 있다는 것을 알고 있습니다. 이 기사에서는 이 문제에 대한 효과적인 해결책을 다음과 같이 제안합니다.

사례: jQuery 1.3.2와 1.4.2 간의 충돌을 해결합니다. (이 예제는 테스트를 거쳐 통과되었습니다!)

1단계: 1.4.2 소스 코드 끝에 문장 추가:

var $j4 = jQuery.noConflict(true);

대부분의 글에서 언급한 것처럼 사용할 때 소스코드에 추가하지 않고 여기에 추가하는 이유는 1.4.2 기반 플러그인을 많이 추가해야 하기 때문입니다. 여기에 추가하면 추가도 피할 수 있기 때문입니다. 많은 플러그인으로 인해 중복이 발생합니다. 이 문장은 1.4.2에서 jQuery와 $의 모든 참조 권한을 포기합니다. 즉, 1.4.2 기반 플러그인은 더 이상 jQuery와 $를 사용할 수 없습니다. 동시에 $j4에 새로운 네임스페이스를 부여합니다. 이는 window의 속성입니다. 1.4.2의 소스코드를 보면 실제로 다음 두 문장을 실행하는 것을 볼 수 있습니다.

window.$=_$;
window.jQuery=_jQuery;

window.$=_temp$(네임스페이스 반환)과 원리는 동일하지만 이름이 다릅니다.

2단계: 1.4.2 프레임워크를 기반으로 하는 모든 플러그인의 헤드에 다음 코드를 추가합니다.

var _temp$ = window.$,_tempjQuery = window.jQuery;

jQuery1.3.2의 $와 jQuery를 임시 변수 공간에 넣습니다.

window.$ = $j4;

이 문장과 아래 문장은 모두 jQuery와 $를 올바르게 사용하기 위한 중간 코드입니다. 다음 $j4는 올바른 참조를 제공하는 것입니다.

window.jQuery = $j4;

임시 변수를 먼저 저장해야 하는 세 가지 이유는 다음과 같습니다.

①. jQuery 플러그인 소스 코드는 대량으로 변경하지 않는 것이 좋습니다. 변경하더라도 최소한으로 변경하는 것이 좋습니다. 머리 부분과 꼬리 부분에 수정된 코드를 추가하고 중간 부분의 원본 코드는 그대로 두는 것도 좋은 방법입니다.

②. 1.4.2에서는 jQuery와 $에 대한 제어권을 포기했지만 기존 플러그인 코드에서는 이를 참조용으로 사용하기 때문에, 다른 플러그인과 충돌이 있어도 플러그인은 충돌을 예측할 수 없기 때문입니다. . jQuery의 플러그인이 아닌 한 $ 또는 jQuery를 사용하여 참조하세요.

3. 플러그인이 1.3.2 jQuery 및 $를 참조하기 위해 window.$ 및 window.jQuery를 직접 사용하는 것을 방지하기 위해 이러한 상황은 비교적 드물지만 만일의 경우에 발생합니다.

중간 원래 코드는 그대로 유지되며, 마지막에 다음 코드가 추가됩니다.

window.$ = _temp$;//将$的引用权限返还给jQuery1.3.
window.jQuery = _tempjQuery;//将jQuery的引用权限返还给jQuery1.3.

3단계: 향후 jQuery1.4.2 기반의 선택 기능을 사용하고 싶다면 $j4(element)만 사용하면 됩니다.

요약: 현재까지 실현 가능한 솔루션: jQuery1.4.2는 $ 및 jQuery의 제어 권한을 완전히 포기합니다. 1.3.2 $의 제어 권한은 포기하지만 jQuery의 권한은 포기하지 않습니다. 실제로 jQuery도 포기할 수 있지만 별칭 $j3을 주어야 합니다. $의 제어 권한을 얻는 jQuery1.3.2 뒤에 프로토타입을 배치하는 것이 가장 좋습니다. 단지 앞으로 jQuery1.4.2를 사용하려면 $j4를 사용하여 참조해야 한다는 것입니다. 하지만 이렇게 하면 jQuery 프레임워크 버전 충돌이 아무리 많아도 모두 해결됩니다. jQuery 1.2가 나오면 (2)의 실행 단계를 참조했는데 첫 번째 단계가 다음과 같이 변경됩니다.

var $j2 = jQuery.noConflict(true);

세 번째 단계에서는 $j2(element)를 사용하세요. 원칙은 동일합니다.

저는 이 기사에 설명된 내용이 모든 사람의 jQuery 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.