Multiple jQuery versions coexist in the processing scheme

How do you get multiple jQuery to co-exist on one page? Examples are jquery-1.5 and jquery-1.11.

You may ask, why do I need to have multiple jQuery coexist on one page? Can't you just reference the latest version of jQuery?

The answer is, no. Because real life is very cruel. Take a chestnut:

The existing site already references 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 of them, or wait for the authors of each plug-in to release a version that supports the latest version of jQuery.

Now, if we were to develop a new plug-in based on jQuery or write JavaScript code, the new version would save time and effort.

But the old version should never be thrown away. What should we do?

The approach is to have multiple versions coexist through noConflict() of jQuery.

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

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

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

   var $jq = $.noConflict();

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

When we call:

   var $jq = $.noConflict(true);

Both window. $and window. jQuery are restored, and the 1 cut looks like jQuery never imported 1, except jQuery can be used with the variable $jq.

So, jQuery, which allows the old and new versions to coexist, can be implemented as follows:

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

   <script src="jquery-1.11.js"></script>

   <script>

      //  now window.$ and window.jQuery is 1.11 version :

      console.log($().jquery); // => '1.11.0'

      var $jq = jQuery.noConflict(true);

      //  now window.$ and window.jQuery Be restored into 1.5 version :

      console.log($().jquery); // => '1.5.0'

      //  Can be achieved by $jq access 1.11 Version of the jQuery the 

   </script>

   <script src="myscript.js"></script>

In myscript.js, you can access version 1.11 of jQuery for $jq.

So, problem solved.

However, when two versions of jQuery were introduced, the page was messed up. If someone can't read the code, put var $jq = jQuery.noConflict (true); How to do delete? Alternatively, if the two lines imported into jQuery are swapped, you end up with the correct version of jQuery.

The best thing to do is to leave the page as it is and refer directly to our new js file:

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

   <script src="myscript.js"></script>

In this way, we refer to the latest version of jQuery inside myscript.js, and we don't care which version of jQuery is on the page, whether or not it has jQuery.

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

   // myscript.js

   (function () {

      // BEGIN

      // TODO: javascript code here...

      // END

   })();

It is a good practice to use anonymous functions that do not pollute global variables, while eliminating external code access.

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

   // 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, 1, 3 lines, and then 1 sentence:

   var $ = jQuery.noConflict(true);

Note that $is a local variable, which you can refer to at any time in the following code, not an object like other versions of the jQuery global variable $on 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.

That's all for this article, I hope you enjoy it.