Take the 2-minute tour ×

I'm learning the module pattern for javascript in order to tidy up my code and reduce the need for a long 'global' javascript file. As a consequence of this, I have a top level 'namespace' module, and a utility module in the same file. The utility module has some functions that require jquery, and others that do not.

On lightweight pages that use no jQuery, I don't want to load the library (I have a very good reason for not doing so). The problem arises when jQuery is passed as a parameter to the module as in the following:

MODULE.vars = (function (variables,$) {
   variables.cdn = undefined; //global for clientside cdn
   variables.version = undefined; //global for clientside cdn version
   variables.isTouchScreen = undefined; //global for touchscreen status

   //Check if jquery exists, if so patch the jquery dependent functions
   if ($) {
       $(document).ready(function () {
           variables.isTouchScreen = $('html').is('.touch');

   return variables;

}(MODULE.vars || {}, jQuery));

The code stops on pages that I don't load jquery, stating that jQuery is undefined - fair enough. If I change the last line to:

}(MODULE.vars || {}, jQuery || false));

the code still complains that jQuery is undefined. I thought, perhaps erroneously, that if jQuery was undefined, it would be passed as undefined in this instance and instead take up the value false (which logic dictates wouldn't be necessary anyway).

How do I get around this problem when jQuery may or may not be present? I attempted to put the following at the top of the script:

var jQuery = jQuery || false;

thinking that this would then take up the value of jQuery if it was loaded. It works in modern browsers with this, but IE8 complains as it gets set to false even if jQuery is being loaded first on a page.

The scripts are all loaded in the correct order in the html, jQuery first, then my module afterwards.

When checking for the cause, IE8 returns $ as an object and jQuery as false. If i do not set the above line in the script, jQuery returns as the same object as $.

Sadly I have to cater for IE8 as well, so how do I get around this issue of the optional presence of jQuery?

Edit: This is only a snippet of the module and there are other functions that depend on jquery, but simply won't get implemented if jquery is not available

share|improve this question
Try typeof jQuery !== 'undefined' –  elclanrs May 3 '13 at 9:02
I'm not certain where I should be putting that. It's throwing the error on the line that is actually passing the jQuery variable to the anonymous function (last line of the module) not inside the function itself. –  Deane Saunders-Stowe May 3 '13 at 9:08
add comment

1 Answer

up vote 0 down vote accepted

I seem to have found an answer that works after I worked out how to implement elanclrs suggestion - I put the following at the top of my modules:

var jQ = jQ || false;
   if (typeof jQuery !== 'undefined') {
   jQ = jQuery;

Then in my module, I pass jQ instead of jQuery.

The reasoning behind the answer was pointed at in this question: Error when passing undefined variable to function?

share|improve this answer
add comment

Your Answer


