如何有效地将yepnope.js与$（document）.ready（）一起使用？

| 我一直在实现yepnope脚本加载器，作为modernizr.js库的一部分。之后，我已经成功地加载了jQuery和依赖jQuery的脚本。我是异步加载资源的新手，所以对我来说有点新。我一直在搜索，但以下内容并没有带来太多运气。我的问题是，当您使用yepnope.js框架时，如何有效地替换$（document）.ready（）功能，您有何看法？我的理论是在基础库中创建一个适当命名的函数，然后将页面上的该变量设置为包含我现有的$（document）.ready（）代码的匿名函数。在所有脚本都加载到完整的回调中之后，yepnope将调用此变量。您是否同意这是一种好方法，还是我完全以错误的方式来对待呢？（对于那些不知道的情况，yepnope.js的异步特性意味着该文件在yepnope加载程序完成之前调用$或jQuery，并抛出一个“ $ $ undefined \”错误<-如果错误，请更正。）第一个问题，希望它是一个好问题。

已邀请:

5 个回复

枫湃揩乾纲

如果不带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>

版萍层分

这是我使用的技术。它使我可以在任何喜欢的地方撒上$（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（）{}）样式调用。

容淑阔九

脚本标签正在同步加载-因此，如果您将yepnope放入js文件并通过脚本标签进行加载：

   <script type=\"text/javascript\" src=\"/my-yepnope-stuff.js\"></script>
</body>

您可以肯定地在关闭body标签之前，将其置于$（document）.ready（）状态。您需要自己回答的问题是强制以$（document）.ready（）方式加载yepnope是否有意义，因为其主要目的是首先破坏脚本标记的同步加载顺序。

赐黄

在@ezmilhouse的指导下，我考虑了实现我所追求的最佳方法，同时仍与我们的旧代码保持兼容性。我的解决方案是设置yepnope脚本加载器，以基于它们各自的依赖关系以分层方式加载所有必需的脚本。加载所有脚本后，您可以使用对yepnope的调用的complete属性来调用我的ready函数。这意味着文档已有效准备就绪，并且代码可以正常工作。我也将js移到了页面的底部（这是我早就应该做的事情，但是我们有很多旧页面！:)）这是一个示例（使用虚假的libray /脚本名称仅用于说明目的）：

yepnope({
    test: baseLib.debug,
    yep: { \"max\": \"/version2/res/jquery/jquery-1.5.2.js\" },
    nope: { \"min\": \"/version2/res/jquery/jquery-1.5.2.min.js\" },
    callback: {
        \"max\": function (url, result, key) {
            baseLib.Log(\"jQuery full loaded.\");
        },
        \"min\": function (url, result, key) {
            baseLib.Log(\"jQuery min loaded.\");
        }
    },
    complete: function () {
        if (window.$) {
            yepnope({
                test: base.debug,
                yep: {
                   \"anotherscript\": \"script/url/here.js\",
                   \"anotherscript2\": \"script/url/here2.js\"
                },
                nope: {
                    \"anotherscript\": \"script/url/here-min.js\",
                    \"anotherscript2\": \"script/url/here2-min.js\"
                },
                both: {
                    \"anotherscript3\": \"script/url/here3.js\"
                },
                callback: {
                    \"anotherscript\": function (url, result, key) {
                        baseLib.Log(\"anotherscript \" + (result ? \"Max\" : \"Min\") + \" loaded.\");

                    },
                    \"anotherscript2\": function (url, result, key) {
                        baseLib.Log(\"anotherscript2 \" + (result ? \"Max\" : \"Min\") + \" loaded.\");
                    },
                    \"anotherscript3\": function (url, result, key) {
                        baseLib.Log(\"anotherscript3 loaded.\");
                    }
                },
                complete: function () {
                    baseLib.Log(\"Scripts Loaded\");
                    baseLib.Page.Ready();
                }
            });

        }
        else {
            baseLib.Log(\"Could not load jQuery. No further jQuery dependent files loaded.\", \"error\");
        }
    }
});

在我的页面js中，我将为baseLib.Page.Ready分配一个函数，然后由yepnope调用该函数。

抽法

我认为Alex Sexton解决方案是正确的：

yepnope({
    load: \'//ajax.googleapisOFFLINE.com/ajaxX/libs/jquery/1.7.1/jquery.min.js\',
    callback: function () {
        if (!window.jQuery) {
            yepnope(\'/js/jquery-1.7.1.min.js\');
        }
    },
    complete: function () {
      $(function(){
        $(\"div.whatever\").css(\"color\",\"red\");
      });
    }
});

要回复问题请先登录或注册

如何有效地将yepnope.js与$（document）.ready（）一起使用？

5 个回复

发起人

document_ready

yepnope

asynchronous_loader

javascript

jquery

问题状态

如何有效地将yepnope.js与$（document）.ready（）一起使用？

与内容相关的链接

5 个回复

发起人

document_ready

yepnope

asynchronous_loader

javascript

jquery

问题状态