如何有效地使用yepnope.js和$(document).ready()？

Question

我一直在实现yepnope脚本加载器作为modernizr.js库的一部分.之后我成功地加载了jQuery以加载jQuery依赖脚本.我是异步加载资源的新手,所以对我来说这有点新鲜.我一直在四处寻找,但是下面没有太多运气.

我的问题是,在使用yepnope.js框架时,您对如何有效替换$(document).ready()的功能有何看法？

我的理论是在我的基础库中创建一个适当命名的函数,然后在我的页面上将该变量设置为包含我现有的$(document).ready()代码的匿名函数.在所有脚本加载到完整回调之后,yepnope将调用此变量.

你是否同意这是一个很好的方法,或者我是否完全以错误的方式接近这个？

(对于那些不知道的人,yepnope.js的异步性质意味着文档在yepnope加载器完成之前调用$或jQuery,抛出"$ is undefined"错误< - 如果错误请纠正我.)

第一个问题,希望它是一个好的.

Answer 1

这是我使用的技术.它允许我在任何我喜欢的地方撒上$(document).ready()样式的调用.使用此方法,您可以使用已经使用jQuery并且已经存在$(document).ready()调用的站点,并轻松地改进yepnope.

首先,在任何调用$(document).ready()的javascript之前,最好在文档头中添加这行JS;

<script>
    var docready=[],$=function(o){function r(fn){docready.push(fn);}if(typeof o === 'function') r(o);return{ready: r}};
</script>

然后,让你的yepnope jQuery测试对象设置类似于:

yepnope({
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js',
    complete: function() {
        $ = jQuery;         
        for(n in docready) $(document).ready(docready[n]);
    }
});

我们在jQuery加载之前创建一个假的$(document).ready().这将每个$(document).ready()调用存储在一个数组docready中.然后,一旦jQuery加载,我们用现在加载的真实jQuery对象覆盖我们的临时$对象.然后,我们遍历所有存储的$(document).ready()调用,并执行它们.

更新:Chris Jones的改进版本,也涵盖了$(function(){})样式调用.

Answer 2

如果没有yepnope加载jQuery对你来说不是问题,那么有一种更简单的方法.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    $.holdReady(true);

    yepnope.load({
        load: [
            'placeholder.js',
            'jquery-ui.min.js'
        ],
        complete: function (){
            $.holdReady(false);
        }
    });
</script>