jQuery optimized load for module, using only one file (layout)

Question

In Magento environment, prototype rules. In order to play with jQuery, we need to:

• load jQuery before prototype
• check if jQuery is already loaded before loading it (by some other module, or the webdesigner)
• prevent conflicts with prototype using jQuery.noConflict();

Complementary to that, I prefer to avoid packaging again and again the JavaScript libraries, so the solution would be to load external_js; two major benefits:

• Module easier to debug
• Gain loading speed by using cached files (for instance, using cdn), the more developers use this practice, the better for us all it will be.

How to mix all these requirements?

Answer 1

Well, mixing different solutions, I came up with that XML (module layout) code:

<?xml version="1.0"?> 
<layout version="0.1.0"> 
 <default>
 <update handle="add_jquery_first" />
 </default>
 <add_jquery_first>
 <reference name="head">
 <block type="core/text" name="jquery_load">
 <action method="setText">
 <text><![CDATA[if (!!!window.jQuery){ document.write('
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">jQuery.noConflict();</script>');
 }]]></text>
 </action>
 </block>
 </reference>
 </add_jquery_first>
 <!-- other stuff -->
</layout>

The javascript part is ugly, but working :) And you can load other jQuery libraries as well.

For this example, I load the latest from jQuery, but you can replace the url by the one you want, for example:

• https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
• http://code.jquery.com/jquery-1.11.3.min.js

That's all folks!

Future update: guess if the (hypothetically) already pre-loaded one is the right (or compatible) version with jQuery.fn.jquery