10

jQuery 2.0 is increasingly mature: http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/

jQuery 2.0 breaks compatibility with older browsers, so one must know when to stay with jQuery 1.9. The recommended approach is to use IE's conditional comments:

<!--[if lt IE 9]>
    <script src="jquery-1.9.1.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="jquery-2.0.0b2.js"></script>
<!--<![endif]-->

  • current web development best-practice suggests that we should be avoiding browser-sniffing or user agent string parsing, but isn't this sort of what conditional comments are?

  • does jQuery 2.0 only break compatibility with older Internet Explorer? or are there other browsers that will be worse off in 2.0?

  • if this affects more than just Internet Explorer (which is the only place conditional comments work), then what strategy should we use for selecting the best jQuery?

  • is there a globally-accessible value/object/function/etc in the JavaScript environment whose presence can be used to signal compatibility with jQuery 2.0 (e.g. a feature-detect)?

main question

My projects currently use Require.JS to modularise my code. My code currently loads jQuery only when it encounters the first section that requires it.

What is the best way to load the correct version of jQuery using Require.JS?

I'm currently considering:

  • using the IE conditional comments before I load Require.JS, then "defining" jQuery manually afterwards

  • using a JS feature-detect in the code that sets Require.JS's paths (before anything require's jQuery) setting the path to 1.9 or 2.0 as appropriate (my preferred method)

  • always using 1.9 no matter what (the safest and most boring approach)

Improve this question
4
  • conditional comments can't be spoofed like user-agents. Commented Mar 5, 2013 at 0:01
  • I read that recommendation and I don't get it, as IE10 doesn't support conditional comments. Commented Mar 5, 2013 at 0:15
  • 2
    IE10 doesn't support conditional comments, thus it reads it the same as Chrome or Firefox would...ignoring the first comment (as it looks like a comment) and still reading the second script tag. Commented Mar 5, 2013 at 0:17
  • Yeah, I initially had the same mental hurdle. Having very infrequently relied on conditional comments, I actually thought that non-IE would get nothing. :P Commented Mar 5, 2013 at 0:28

2 Answers 2

Reset to default
13

Adaptation of niaccurshi's answer to AMD spec.

// Do this before your first use of jQuery.

var pathToJQuery
if('querySelector' in document
    && 'localStorage' in window
    && 'addEventListener' in window) {
    pathToJQuery = '//cdn/jQuery2.0'
} else {
    pathToJQuery = '//cdn/jQuery1.9'
}

require.configure({'paths':{
    'jquery': pathToJQuery
}})

require(['jquery'], function($){ /* you get the one you need here */ })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

There is actually a more elegant solution, it's being used by the BBC for their responsive news website.

It essentially detects browsers considered to be new, and thus would be compatible with jQuery 2.0+, and therefore leaves everything else as an old browser. You may be able to replicate this with Require.js, but the reality is you don't need to...

if(querySelector in document
    && localStorage in window
    && addEventListener in window) {
    //Add jQuery 2.0+
} else {
    //Add jQuery 1.9.0+
}

//This is intended to be a flag that can be checked against to see if the jQuery library has been loaded into the browser.
var jQueryVersion = 0;
function jQueryRunning(ver) {
    //This could be "true", or could be a version number, it's largely down to your own system needs!
    jQueryVersion = ver;
}

Source: link

You should add a callback function to each of the scripts for jQuery, that calls jQueryRunning with the parameter equal to it's version number, this may help you decide on further functions to run down the line, and has the benefit of letting you know when the jQuery code has been embedded (just in case the connection is slow and it takes a while to download).

If using Require.js this may not be something you want to be concerned about!

I say this is a elegant solution because you're quite right, the issue isn't only old versions of IE, it's also older versions of Firefox (before 3.5) and old mobile browsers (if they even deal with javascript!)

Improve this answer

8 Comments

I'll probably skip the "localStorage" bit (I assume that has nothing to do with jQuery). So IE8 has querySelector (from the Selectors API) but it doesn't have addEventListener (from DOM Level 2). Looks like this is a nice browser-neutral way of testing this. Cheers!
Yes, as the article says it's more use if you intend to use it. Though I would say it's a good practice, and doesn't add any performance impact to your code, so for "future proofing" I would personally leave it in :) No problem though.
Looks cool. Is there a reason for not using $.fn.jquery for discovering which jQuery version is running?
To clarify, I'm considering the if-else part of this the answer I was looking for.
Unfortunately the source link broke by now: The new one is without blog subdomain: responsivenews.co.uk/post/18948466399/cutting-the-mustard
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.