How to make multiple jquery on one page

How do you let multiple jquery coexist on a single page? Like jquery-1.5 and jquery-1.11.

You might ask, why do you need to have multiple jquery coexist on one page? Is it OK to refer directly to the latest version of jquery?

The answer is, no. Because the real life is very cruel. Give me a chestnut:

The existing Web site already references jquery 1.5 and related plugins. If you upgrade jquery directly to the latest version, these plugins will not work unless you can upgrade them all, or wait for each plugin author to publish a version that supports the most recent version of jquery.

Now, if we were to develop new plugins or write JavaScript code based on jquery, it would be less time-saving to use the new version.

But the old version can never be thrown away, how to do?

The method is to make multiple versions coexist through jquery's noconflict ().

When we import jquery, jquery injects only two variables into the Global space of window:

window.$ = Window.jquery = {JQuery object};

At the same time, jquery retains references to old window.$ and Window.jquery objects. When we call:

var $jq = $.noconflict ();

Window.$ is restored, but Window.jquery is still jquery.

When we call:

var $jq = $.noconflict (true);

window.$ and Window.jquery have been restored, and everything looks like jquery has never been imported, except that jquery can be used with variable $JQ.

So, jquery, where the old and new versions coexist, can be implemented like this:

<script src= "Jquery-1.5.js" ></script><script src= "Jquery-1.11.js" ></script><script >    //Now window.$ and Window.jquery are 1.11 versions:    Console.log ($ (). jquery);//= ' 1.11.0 '    var $jq = Jquery.noconflict (true);    Now window.$ and Window.jquery are restored to version 1.5:    Console.log ($ (). jquery);//= ' 1.5.0 '    //You can access the 1.11 version of jquery via $JQ </script><script src= "Myscript.js" ></script>

In Myscript.js, you can access the 1.11 version of jquery with $JQ.

At this point, the problem is resolved.

However, after the introduction of two versions of jquery, the page was made a mess. If someone can not understand the code, the var $jq = Jquery.noconflict (true); Alternatively, the two lines that were imported into jquery are swapped for positions, and the correct jquery version is not available at the end.

The best way is not to change the page, directly referencing the new JS file we wrote:

<script src= "Jquery-1.5.js" ></script><script src= "Myscript.js" ></script>

In this way, we refer to the latest version of jquery within the myscript.js, and we don't care whether the page has jquery or any version of jquery.

Start writing new and better solutions. First, determine the subject of the myscript.js:

Myscript.js (function () {    //BEGIN    //todo:javascript code    here ... END}) ();

Using anonymous functions is a good practice, not polluting global variables, and eliminating external code access.

The next step is to embed the jquery 1.11 code directly in:

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}) ();

Embedded is of course the compressed code, altogether 3 lines, and then add a sentence:

var $ = Jquery.noconflict (true);

Note that $ is a local variable that can be referenced at any time in the following code, with the other version of the jquery global variable $ not an object on the page.

The final step is to check whether the jquery protocol allows us to embed the jquery source directly into our own JavaScript code.

[Reprint, author unknown]

How to make multiple jquery on one page