1

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

philwinkle
  • 7,036
  • 3
  • 27
  • 46
  • I believe this is as far as I can get on my own. At present, my main goal is to rewrite all code utilizing jQuery's `ready` to be wrapped with yepnope. Just trying to provide a drop-in phased approach to get some async goodness in right away. – philwinkle Mar 25 '11 at 20:29
  • Hi! I suppose, the only thing I'm confused about, is the case when jQuery wasn't available, wouldn't this just execute right away still? Perhaps you'd add in a `load` part or something, but as of right now, it always just calls `complete` and then executes. I think the best course of action for this would be to create a jsfiddle or a jsbin example. I'd be happy to pitch in some code. – Alex Sexton Mar 27 '11 at 02:30

1 Answers1

5

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>
skaurus
  • 1,581
  • 17
  • 27