开发者

Yepnope and "Proxy"-ing jQuery's ready() function

开发者 https://www.devze.com 2023-02-19 21:28 出处:网络
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

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 = 
 开发者_Go百科       _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


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>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号