Solutions for coexistence of multiple jQuery versions

Solutions for coexistence of multiple jQuery versions

How can multiple jQuery coexist on one page? Like jquery-1.5 and jquery-1.11.

You may ask why multiple jQuery players need to coexist on one page? Can't I directly reference the latest version of jQuery?

The answer is, no. Because real life is cruel. Example:

The existing website has referenced jQuery 1.5 and related plug-ins. If you upgrade jQuery directly 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 jQuery version.

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 cannot be discarded. What should I do?

The method is to use jQuery's noConflict () to make multiple versions coexist.

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

Copy codeThe Code is as follows:
Window. $ = window. jQuery = {jQuery object };

Meanwhile, jQuery retains references to the old window. $ and window. jQuery objects. When we call:

Copy codeThe Code is as follows:
Var $ jq = $. noConflict ();

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

When we call:

Copy codeThe Code is as follows:
Var $ jq = $. noConflict (true );

Window. $ and window. jQuery are restored. Everything looks like jQuery has never been imported, but jQuery can be used through the variable $ jq.

Therefore, jQuery, which coexist with the old and new versions, can be implemented as follows:

Copy codeThe Code is as follows:
<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 use $ jq to access jQuery 1.11.
</Script>
<Script src = "myscript. js"> </script>

In myscript. js, you can use $ jq to access jQuery 1.11.

Now, the problem is solved.

However, after two versions of jQuery are introduced, the page is messy. What if someone does not understand the code and deletes var $ jq = jQuery. noConflict (true? Or, swap the two lines imported into jQuery, and the correct jQuery version is not obtained.

The best way is to directly reference the newly written js file without modifying the page:

Copy codeThe Code is as follows:
<Script src = "jquery-1.5.js"> </script>
<Script src = "myscript. js"> </script>

In this way, we reference the latest version of jQuery in myscript. js, and we don't care whether there is jQuery or any version of jQuery on the page.

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

Copy codeThe Code is as follows:
// Myscript. js
(Function (){
// BEGIN
// TODO: javascript code here...
// END
})();

Using anonymous functions is a good habit. It does not pollute global variables and prevents external code access.

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

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

Embedded is of course the compressed code, a total of three lines, then add one sentence:

Copy codeThe Code is as follows:
Var $ = jQuery. noConflict (true );

Note that $ is a local variable and can be referenced at any time in the subsequent Code. It is not an object with jQuery global variable $ of other versions on the page.

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

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