Combining Different Versions of Dojo
During a project I've been working on for the past couple of months my office mate and I needed to work out how to combine a recent version of Dojo and use it on a page where an old version of Dojo was already present. Our reasons were simple, we were writing a Dojo Mobile app and hence required the use of a new version of Dojo. However, we were displaying content within our app from a product that embeds an older version of Dojo.With not much in the way of documentation on how to do this available, I asked our local Dojo guru for some advice and he pointed me towards the "noGlobals" option in dojoConfig. This is the key to getting things working as it stops the new version of Dojo from writing to the global name space i.e. when you include the old version of Dojo it sets up a global variable called "dojo" if you simply include the new version of Dojo it will also write to the "dojo" global variable. That means which ever version of Dojo you include last will always be the one you're using when you reference the "dojo" variable. With the "noGlboals" option in place (which is adhered to by Dojo 1.7 and above I believe) you can continue to use old versions of Dojo from the global name space in conjunction with locally scoped newer versions of Dojo.
It appears there's still not a great deal of examples out there on how to do this so this is my attempt to put together a simple example to show how it's done by combining the ancient Dojo 1.3.3 with the latest at the time of writing Dojo 1.8.1:
<html> <head> <title>Dojo Mix-Up</title> <!-- lets start by including a really old version of Dojo --> <script type="text/javascript" data-dojo-config="isDebug: false, parseOnLoad: false" src="dojo-release-1.3.3/dojo/dojo.js"> </script> <!-- configure Dojo to load without trampling the global namespace --> <script language="JavaScript" type="text/javascript"> var dojoConfig = { noGlobals : true, }; </script> <!-- load the latest version of dojo --> <script type="text/javascript" data-dojo-config="isDebug: false, parseOnLoad: false" src="dojo-release-1.8.1/dojo/dojo.js"> </script> </head> <body> <!-- Shove in a couple of divs to write to --> <div id="oldDojo"></div> <div id="newDojo"></div> <script type="text/javascript"> // output our global namespace Dojo version (1.3.3) dojo.byId("oldDojo").innerHTML = dojo.version; // output our new Dojo version (1.8.1) require(["dojo/dom", "dojo"], function(dom,dojo){ dom.byId("newDojo").innerHTML = dojo.version; }); </script> </body> </html>