Question

I’m (very) slowly getting a massive static-file site up to date with all the latest goodies. I am using yepnope (packaged with the new Modernizr.load) to handle async dependency loading and I need it to, in the meantime, be backwardly compatible with the current codebase.

This requires that i either wrap every single jQuery call sitewide (too big of a task to do in the immediate future) in yepnope()‘s wrapper, or the more creative solution is to proxy jQuery’s ready() function through my own, and to delay the execution of any $ code until the callback from yepnope is ready… jQuery’s actual ready() function will be the handler once the yepnope test is satisfied with jQuery’s ready. Make sense?

The question at-hand:

Am I creating a disaster here? Is this
a suitable workaround for my
short-term issue of a poorly
implemented sitewide mess of spaghetti
DOM-centric code?

update #3

A more well-thought-out approach that also accounts for non-ready where anonymous function is just passed straight to jQuery. This is a third attempt at doing as little as possible to preserve just the functionality of $(function(){}) calls as well as $(document).ready() calls.

    (function( window, undefined ) {
    var jQuery = (function(fn) {
    if (typeof fn === 'function') {
        yepnope({
            test: window.jQuery.length,
            complete: function() {
                fn();
            }
        });
    }
    var jQuery = 
        _jQuery = window.jQuery,
        _$ = window.$;
    jQuery = jQuery.prototype = {
        constructor: jQuery,
        ready: function( fn ) {
            yepnope({
                test: window.jQuery.length,
                complete: function() {
                    fn();
                }
            });
        }
    };
    return jQuery;
    });
    window.jQuery = window.$ = jQuery;
    })(window);

This is pretty sexy because while it duplicates the loading behavior of jQuery, it doesn’t have a length, inherently… by using yepnope to test for window.jQuery.length, it will only return true once the REAL jQuery is loaded (the proxy doesn’t have a length)!

I earnestly seek any criticism – especially from Alex Sexton 🙂 lol

Answer 1

Tried to use example of philwinkle, it doesn’t work (at least resulting temp jQuery variable had .length prop in FF3.6).

Googled for a while and found jQl, asynchronous jQuery loader, which have a way to cope with $(document).ready called before actual jQuery loading. Borrowed some code and got:

<script type="text/javascript">
var jQ = {
    queue: [],
    ready: function (f) {
        if (typeof f=='function') {
            jQ.queue.push(f);
        }
        return jQ;
    },
    unq: function () {
        for (var i = 0; i < jQ.queue.length; i++) jQ.queue[i]();
        jQ.queue = null;
    }
};
if (typeof window.jQuery == 'undefined') { window.jQuery = window.$ = jQ.ready; }

yepnope({
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js',
    complete: function () {
        jQ.unq();
    }
});
</script>