Solutions for coexistence of multiple jQuery versions_jquery

How to let multiple jQuery coexist on one page? Such as jquery-1.5 and jquery-1.11.

You may ask, why do you need multiple jQuery to coexist on one page? Isn’t it possible to directly quote the latest version of jQuery?

The answer is, no. Because real life is very cruel. Give me an example:

Existing websites have already referenced jQuery 1.5 and related plug-ins. If you directly upgrade jQuery to the latest version, these plug-ins will not work unless you can upgrade all these plug-ins, or wait for the author of each plug-in to release a version that supports the latest version of jQuery.

Now, if we want to develop new plug-ins or write JavaScript code based on jQuery, using the new version will save time and effort.

But the old version must not be thrown away, what should I do?

The method is to use jQuery’s noConflict() to allow multiple versions to coexist.

When we import jQuery, jQuery only injects two variables into the global space of window:

Copy code The code is as follows:

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

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

Copy code The code is as follows:

var $jq = $.noConflict();

window.$ is restored, but window.jQuery is still jQuery.

When we call:

Copy code The code is as follows:

var $jq = $.noConflict(true);

Both window.$ and window.jQuery are restored, and everything looks like jQuery has never been imported, except that jQuery can be used through the variable $jq.

So, allowing new and old versions of jQuery to coexist can be implemented like this:

Copy code The code is as follows:

<script><br> // Now window.$ and window.jQuery are version 1.11:<br> console.log($().jquery); // => '1.11.0'<br> var $jq = jQuery.noConflict(true);<br> // Now window.$ and window.jQuery are restored to version 1.5:<br> console.log($().jquery); // => '1.5.0'<br> // You can access jQuery version 1.11 through $jq<br> </script>

In myscript.js, use $jq to access the 1.11 version of jQuery.

At this point, the problem is solved.

However, after introducing two versions of jQuery, the page was messed up. What if someone doesn’t understand the code and deletes var $jq = jQuery.noConflict(true);? Or, if you swap the two lines that import jQuery, you won't get the correct jQuery version in the end.

The best way is to directly quote the new js file we wrote without changing the page:

Copy code The code is as follows:

In this way, we will reference the latest version of jQuery inside myscript.js, and we don’t care whether the page has jQuery or not, and which version of jQuery there is.

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

Copy code The code is as follows:

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

It is a good habit to use anonymous functions to avoid polluting global variables and prevent external code access.

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

Copy code The code is 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
})();

The embedded code is of course the compressed code, 3 lines in total, and then add:

Copy code The code is as follows:

var $ = jQuery.noConflict(true);

Note that $ is a local variable. You can reference this $ at any time in the following code. It is not the same object as the global variable $ of jQuery in other versions of the page.

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

The above is the entire content of this article, I hope you all like it.