如何有效地使用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>

Answer 3

腳本標簽正在同步加載 - 所以如果你把你的yepnope放在一個js文件中並通過腳本標簽加載它：

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

在關閉正文標記之前，您可以確定處於$（document）.ready（）狀態。

您需要自己回答的是強制yepnope以$（document）.ready（）方式加載是否有意義，因為它的主要目的是首先打破腳本標記的同步加載順序。

Answer 4

我認為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");
      });
    }
});

Answer 5

使用@ezmilhouse的指導，我想到了實現我所追求的目標的最佳方法，同時仍然保持與舊代碼的兼容性。

我的解決方案是設置我的yepnope腳本加載器，以基於各自的依賴關系以分層方式加載所有必需的腳本。 加載complete所有腳本后，您可以使用我對yepnope的調用的complete屬性來調用我的ready函數。 這意味着該文檔已經有效准備好，代碼可以正常工作。

我也將我的js移動到我的頁面底部（我應該在很久以前做過的事情，但我們有很多遺留頁面！:)）

這是一個示例（使用false libray / script名稱僅用於說明目的）：

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在完成時調用。