如何有效地使用2个版本的JQuery？

Question

I have a web app that using JQuery 1.6, this can't be changed. I have a D3 viewer that needs a version atleast 1.8. I have found a solution as follows :

<script src='link to jquery 1.10'  type="text/javascript"></script>
<script src='link to jquery custom 1.10'  type="text/javascript"></script>

var jQuery_1_8_2= $.noConflict(true);

So where is use '$', i now use 'jQuery_1_8_2'.

This works great, but i have the plugin JStree.

What i need is a function that basically when the viewer is run it changes every use of JQuery to the newer version. So i dont have to go into the source code of the plugin and change every '$' character to 'jQuery_1_8_2'.

Answer 1

You can order your JS files in a way that when JSTree loads there is only one version of JQuery available, it gets JQuery object only once, so there is no problem changing the value of global $ \\ jQuery after it has loaded.

<script src="jquery_for_jstree.js"></script>
<script src="jstree.js"></script>
<script>
 var jsTreeJquery = $.noConflict(true);
 </script>
<script src="another_jQuery.js"></script>
<script>
   jsTreeJquery ("...").jstree(...)
</script>

You can see this approach working on http://jsfiddle.net/npd3kc5t/

This works because JSTree follows jQuery advice of protecting alias and adding scope .

In other words when the plugin loads, it gets the global jQuery reference and creates a local variable $ only for it, so does not matter what do you do after plugin loaded with global $ \\ jQuery .

Answer 2

Use jquery no conflict

//new version 
var newJquery = jQuery.noConflict();
//call it like this
newJquery('#example').on('click')......

For the old one do the samething

var oldJquery = jQuery.noConflict();