여러 jQuery 버전의 공존을 위한 솔루션_jquery

한 페이지에 여러 jQuery가 공존하도록 하는 방법은 무엇입니까? jquery-1.5 및 jquery-1.11과 같은 것입니다.

한 페이지에 공존하기 위해 여러 jQuery가 필요한 이유는 무엇입니까? 최신 버전의 jQuery를 직접 인용하는 것은 불가능한가요?

답은 '아니오'입니다. 현실 생활은 매우 잔인하기 때문입니다. 예를 들어보세요:

기존 웹사이트에서는 이미 jQuery 1.5 및 관련 플러그인을 참조했습니다. jQuery를 최신 버전으로 직접 업그레이드하는 경우, 모든 플러그인을 업그레이드하거나 각 플러그인 작성자가 최신 버전의 jQuery를 지원하는 버전을 출시할 때까지 기다리지 않는 한 이러한 플러그인은 작동하지 않습니다.

이제 새로운 플러그인을 개발하거나 jQuery를 기반으로 JavaScript 코드를 작성하려는 경우 새 버전을 사용하면 시간과 노력을 절약할 수 있습니다.

그런데 이전 버전을 버리지 말아야 하는데 어떻게 해야 하나요?

이 방법은 jQuery의 noConstrict()를 사용하여 여러 버전이 공존할 수 있도록 하는 것입니다.

jQuery를 가져올 때 jQuery는 창의 전역 공간에 두 개의 변수만 삽입합니다.

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

​ window.$ = window.jQuery = { jQuery 객체 };

동시에 jQuery는 내부적으로 이전 window.$ 및 window.jQuery 객체에 대한 참조를 유지합니다. 전화할 때:

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

var $jq = $.noConflect();

window.$가 복원되었지만 window.jQuery는 여전히 jQuery입니다.

전화할 때:

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

var $jq = $.noConflect(true);

window.$와 window.jQuery가 모두 복원되었으며 변수 $jq를 통해 jQuery를 사용할 수 있다는 점을 제외하면 모든 것이 jQuery를 가져온 적이 없는 것처럼 보입니다.

따라서 jQuery의 새 버전과 이전 버전이 공존하도록 허용하는 것은 다음과 같이 구현할 수 있습니다.

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

// 이제 window.$ 및 window.jQuery는 버전 1.11입니다.
console.log($().jquery); // => '1.11.0'
var $jq = jQuery.noConflect(true);
// 이제 window.$ 및 window.jQuery가 버전 1.5로 복원됩니다.
console.log($().jquery); // => '1.5.0'
// $jq
를 통해 jQuery 버전 1.11에 액세스할 수 있습니다.

myscript.js에서 $jq를 사용하여 jQuery 1.11 버전에 액세스합니다.

이 시점에서 문제는 해결되었습니다.

그러나 두 가지 버전의 jQuery를 도입한 후 페이지가 엉망이 되었습니다. 누군가 코드를 이해하지 못하고 var $jq = jQuery.noConflect(true);를 삭제하면 어떻게 되나요? 또는 jQuery를 가져오는 두 줄을 바꾸면 결국 올바른 jQuery 버전을 얻을 수 없습니다.

가장 좋은 방법은 페이지를 변경하지 않고 우리가 작성한 새 js 파일을 직접 인용하는 것입니다.

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

이런 방식으로 myscript.js 내에서 최신 버전의 jQuery를 참조하게 되며 페이지에 jQuery가 있는지 여부, 어떤 버전의 jQuery가 있는지는 신경 쓰지 않습니다.

새롭고 더 나은 솔루션을 작성해 보세요. 먼저 myscript.js의 본문을 결정합니다.

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

// myscript.js
(함수 () {
// 시작
// TODO: 여기에 자바스크립트 코드가 있습니다...
// 끝
})();

전역 변수 오염을 방지하고 외부 코드 액세스를 방지하려면 익명 함수를 사용하는 것이 좋습니다.

다음 단계는 jQuery 1.11 코드를 직접 삽입하는 것입니다.

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

// myscript.js
(함수 () {
// 시작
/*! jQuery v1.11.1 */
​​ !function(a,b){"object"==모듈 유형&&"object"==module.exports 유형?...
If(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=...
},cur:function(){var a=Zb.propHooks[this.prop];return a&&a.get?a.get(thi...
      var $ = jQuery.noConflect(true);
// TODO: 여기에 자바스크립트 코드가 있습니다...
// 끝
})();

임베디드 코드는 물론 압축된 코드로 총 3줄이고 다음을 추가합니다.

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

var $ = jQuery.noConflect(true);

$는 다음 코드에서 언제든지 이 $를 참조할 수 있다는 점에 유의하세요. 이는 페이지의 다른 버전에 있는 jQuery의 전역 변수 $와 동일한 개체가 아닙니다.

마지막 단계는 jQuery 프로토콜을 통해 jQuery 소스 코드를 자체 JavaScript 코드에 직접 삽입할 수 있는지 확인하는 것입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.