學習 easyui 之二：jQuery 的 ready 函數和 easyloader 的加載回調函數

Ready 事件不一定 ready

使用 easyloader 的時候，必須要注意到腳本的加載時機問題，easyloader 會異步加載模塊，所以，你使用的模塊不一定已經加載了。比如下面的代碼。

<script type="text/javascript">

    easyloader.locale = "zh_CN";
    using("messager", function () {
        alert("加載成功！");
    });

    $(function () {
        $.messager.alert('Warning', 'The warning message');
    });

</script>

看起來非常簡單，還使用了 jQuery 的 ready 函數。不幸的是，執行一下，就會發現如下的錯誤。

TypeError: $.messager is undefined
[在此錯誤處中斷]     

$.messager.alert('Warning', 'The warning message');

明明已經在前面使用 using 加載了，為什么還會出現這個錯誤呢？這不是已經在 ready 函數中使用了嗎？

如果把前面的代碼修改一下，使用 console.info 輸入日志信息，就會很清楚了。

<script type="text/javascript">

    easyloader.locale = "zh_CN";
    using("messager", function () {
        console.info("加載 messager 成功。");
    });

    $(function () {
        console.info("Ready");
        $.messager.alert('Warning', 'The warning message');
    });

</script>

在 Firebug 中可以看到輸出的信息。

很清楚，Ready 函數先於 using 函數執行了。

也就是說，你不能認為在 jQuery 的 Ready 函數中，已經加載了需要的模塊。原因很簡單，異步加載導致。

用 JavaScript 創建一個 script 元素，然后插入到 DOM 中，這樣就實現了非阻塞的加載 javascript 腳本。此方法被稱為 "Script DOM Element" 法。easyui的 easyloader 就是使用這種方式實現異步加載的。

那么，我們什么時候才能調用延遲加載的模塊呢？答案是在加載模塊的回調函數中，你可以將前面的代碼修改為如下所示：

<script type="text/javascript">

    easyloader.locale = "zh_CN";
    using("messager", function () {
        console.info("加載 messager 成功。");
        $.messager.alert('Warning', 'The warning message');
    });

    $(function () {
        console.info("Ready");
    });

</script>

結論就是，如果你需要使用 easyui 的模塊，就必須將使用代碼放在模塊的加載完成回調函數中，來保證模塊正確完成加載工作。如果不涉及到 easyui ，那么就可以直接使用 jQuery 的 ready 函數。

不能使用 ready 函數了嗎？

如果是在某個按鈕的點擊事件中調用 easyui 的模塊呢？比如說，在點擊某個按鈕之后，使用 messager 的 alert 彈出一個提示框，也必須寫在這個回調函數中嗎？

這倒不必，按鈕的點擊事件注冊還可以與原來一樣寫在 jQuery 的 Ready 函數中，因為在注冊的時候，並沒有真正調用 easyui 的方法，而點擊是在以后的事情，這個時間間隔已經足以加載完成了。

加載多個模塊怎么辦？

如果是需要加載多個模塊之后，又應該怎么辦呢？別忘了，using 加載模塊還可以使用字符串數組的方式直接指定多個模塊，在多個模塊加載完成之后，調用我們的回調函數，比如，我們使用了 linkbutton ，同時還希望使用 messager，可以傳遞一個字符串的數組，將主要使用的模塊表示為 ["linkbutton","messager"]，那么就可以如下完成。

<script type="text/javascript">

    easyloader.locale = "zh_CN";
    using(["linkbutton","messager"], function () {
        console.info("加載 messager 成功。");
        $("#btnAlert").linkbutton();
        $.messager.alert('Warning', 'The warning message');
    });

    $(function () {
        console.info("Ready");
    });

</script>

這樣就保證了我們腳本的正確執行。

在網上看到有朋友 放棄使用easyloader，因為使用的時候出現加載錯誤，可能就是因為上面分析的原因。

延伸閱讀：

世紀之光：jQuery Easyui Easyloader使用注意點總結