15

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

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

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

您是否同意这是一种很好的方法，还是我完全以错误的方式接近它？

（对于那些不知道的人，yepnope.js 的异步特性意味着文档在 yepnope 加载程序完成之前调用 $ 或 jQuery，抛出“$ is undefined”错误<-如果有错误请纠正我。）

第一个问题，希望是个好问题。

4

5 回答 5

11

这是我使用的技术。它允许我在任何我喜欢的地方洒 $(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() 调用存储在一个数组中，doccready。然后，一旦 jQuery 加载完毕，我们用现在加载的真实 jQuery 对象覆盖我们的临时 $ 对象。然后，我们遍历所有存储的 $(document).ready() 调用，并真正执行它们。

更新：来自 Chris Jones 的改进版本，还涵盖了 $(function() {}) 样式调用。

于 2011-12-19T20:37:00.707 回答
11

如果在没有 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>
于 2012-03-06T11:08:02.993 回答
1

脚本标签是同步加载的——所以如果你把你的 yepnope 放在一个 js 文件中并通过脚本标签加载它：

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

在结束正文标记之前，您可以确定处于 $(document).ready() 状态。

您需要自己回答的是，强制 yepnope 以 $(document).ready() 方式加载是否有意义，因为它的主要目的是首先打破脚本标签的同步加载顺序。

于 2011-04-17T15:07:39.713 回答
0

在@ezmilhouse 的指导下，我想到了实现我所追求的目标的最佳方式，同时仍保持与旧代码的兼容性。

我的解决方案是设置我的 yepnope 脚本加载器，以根据它们各自的依赖关系以分层方式加载所有必要的脚本。加载完所有脚本后，您可以使用complete我对 yepnope 的调用的属性来调用我的就绪函数。这意味着文档已经有效地准备好了，并且代码可以正常工作。

我还将我的 js 移到了我的页面的底部（我早就应该这样做了，但是我们有很多遗留页面！:)）

这是一个示例（仅出于说明目的使用错误的库/脚本名称）：

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 将在完成时调用该函数。

于 2011-05-13T10:13:47.203 回答
0

我认为 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");
      });
    }
});
于 2013-07-26T19:52:50.867 回答