한 페이지에서 여러 jQuery 버전을 공존하는 방법

어떻게 한 페이지에 여러 jQuery를 공존시킬 수 있습니까?예를 들어 jquery-1.5와 jquery-1.11.
왜 한 페이지에 여러 jQuery를 공존시켜야 하는지 물어볼 수도 있습니다.최신 버전의 jQuery를 직접 인용하면 안 됩니까?
답은, 안 돼.현실 생활은 매우 잔혹하기 때문이다.예를 들면 다음과 같습니다.
기존 사이트에서는 jQuery 1.5 및 관련 플러그인을 참조했습니다.만약 직접 jQuery를 최신 버전으로 업그레이드한다면, 이 플러그인들은 작동하지 않을 것입니다. 이 플러그인들을 모두 업그레이드하거나, 각 플러그인의 작성자가 최신 버전을 지원하는 jQuery 버전을 발표할 때까지 기다리지 않으면.
현재, 만약 우리가 jQuery를 바탕으로 새로운 플러그인을 개발하거나 자바스크립트 코드를 쓰려고 한다면, 새로운 버전을 사용하면 비교적 시간과 힘을 절약할 수 있을 것이다.
하지만 구판은 절대 버릴 수 없으니 어떡하지?
방법은 jQuerynoConflict()를 통해 여러 버전이 공존하도록 하는 것이다.
jQuery를 가져올 때, jQuery는 window라는 전역 공간에 두 개의 변수만 주입합니다.

window.$ = window.jQuery = { jQuery object };

또한 jQuery 내부에 오래된 window.$ 대상과 window.jQuery 대상의 인용을 보존합니다.우리가 호출할 때:

var $jq = $.noConflict();

window.$는 회복되었지만 window.jQuery는 여전히 jQuery이다.
우리가 호출할 때:

var $jq = $.noConflict(true);

window.$와 window.jQuery가 모두 회복되었습니다. 모든 것이 jQuery가 가져온 적이 없는 것처럼 보이지만 변수$jq를 통해 jQuery를 사용할 수 있습니다.
따라서 신구 버전이 공존하는 jQuery는 다음과 같이 실현할 수 있다.

<script src="jquery-1.5.js">script>
<script src="jquery-1.11.js">script>
<script>
    //   window.$ window.jQuery 1.11  :
    console.log($().jquery); // => '1.11.0'
    var $jq = jQuery.noConflict(true);
    //   window.$ window.jQuery    1.5  :
    console.log($().jquery); // => '1.5.0'
    //     $jq  1.11   jQuery 
script>
<script src="myscript.js">script>

myscript.js에서 $jq로 1.11 버전의 jQuery에 접근할 수 있습니다.
이로써 문제가 해결되었다.
그러나 두 버전의 jQuery를 도입하자 페이지가 엉망진창이 되었다.만약 코드를 이해하지 못하는 사람이 있다면 var $jq = jQuery.noConflict(true);를 삭제하면 어떻게 합니까?또는 가져온 jQuery의 두 줄을 위치를 바꾸면 정확한 jQuery 버전을 얻을 수 없습니다.
가장 좋은 방법은 페이지를 바꾸지 않고 우리가 작성한 새로운 js 파일을 직접 인용하는 것입니다.

<script src="jquery-1.5.js">script>
<script src="myscript.js">script>

이렇게 되면 우리는 myscript.js 내부에서 최신 버전의 jQuery를 인용하고 페이지에 jQuery가 있든 없든 어느 버전의 jQuery가 있든 상관없다.
새로운 더 좋은 해결 방안을 쓰기 시작하다.우선myscript.js의 주체를 확정한다.

// myscript.js
(function () {
    // BEGIN
    // TODO: javascript code here...
    // END
})();

익명 함수를 사용하는 것은 전역 변수를 오염시키지 않고 외부 코드의 접근을 막는 좋은 습관이다.
다음 단계에서는 jQuery 1.11 코드를 직접 삽입합니다.

// myscript.js
(function () {
    // BEGIN
    /*! jQuery v1.11.1 */
    !function(a,b){"object"==typeof module&&"object"==typeof 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.noConflict(true);

    // TODO: javascript code here...
    // END
})();

삽입된 것은 당연히 압축된 코드로 모두 3줄이고 그 다음에 한마디를 더한다.

var $ = jQuery.noConflict(true);

$는 국부 변수로 뒤에 있는 코드에서 수시로 이것$을 인용할 수 있으며 페이지의 다른 버전의 jQuery 전역 변수$와 대상이 아닙니다.
마지막 작업은 jQuery의 프로토콜이 jQuery 원본을 우리 자신의 자바스크립트 코드에 직접 삽입할 수 있는지 확인하는 것입니다.