Multiple jquery versions coexist with a processing scheme _jquery

How do you allow multiple jquery to coexist on one page? Like jquery-1.5 and jquery-1.11.

You might ask, why do you need to have multiple jquery coexist on one page? Directly referencing 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 has a reference to jquery 1.5 and related plug-ins. If you upgrade jquery directly to the latest version, these plugins will not work unless you can upgrade them all, or the authors of each plugin will be able to release the latest version of jquery.

Now, if we're going to develop new plug-ins or write JavaScript code based on jquery, the new version will save time and effort.

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

The method is to allow multiple versions to coexist through the noconflict () of jquery.

When we import jquery, jquery injects only two variables into the window's global space:

Copy Code code as follows:

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

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

Copy Code code as follows:

var $jq = $.noconflict ();

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

When we call:

Copy Code code as follows:

var $jq = $.noconflict (true);

window.$ and Window.jquery have all been restored, and everything looks as if jquery had never been imported, but can use jquery through variable $JQ.

So the jquery that allows the old and new versions to coexist is as follows:

Copy Code code as follows:

<script src= "Jquery-1.5.js" ></script>
<script src= "Jquery-1.11.js" ></script>
<script>
Now window.$ and Window.jquery are version 1.11:
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.

So far, the problem is solved.

However, after the introduction of two versions of jquery, the page was messed up. If someone can't read the code, put var $jq = Jquery.noconflict (true); Alternatively, the two lines of the import jquery are swapped, 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 write:

Copy Code code as follows:

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

As a result, we are referencing the latest version of jquery within the myscript.js, and the page has no jquery or any version of jquery that we don't care about.

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

Copy Code code as follows:

Myscript.js
(function () {
BEGIN
Todo:javascript code here ...
End
})();

Using anonymous functions is a good habit of not polluting global variables while eliminating the need for external code access.

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

Copy Code code as follows:

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 of course is the compressed code, a total of 3 lines, and then add a sentence:

Copy Code code as follows:

var $ = Jquery.noconflict (true);

Note that $ is a local variable, and in the following code, you can refer to this $ at any time, with the other version of the jquery global variable $ is not an object.

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

The above mentioned is the entire content of this article, I hope you can enjoy.