學習 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使用注意點總結