在母版頁中使用Lab.js異步加載jQuery，然后在子文件中使用jQuery代碼

Question

我使用LAB.js在asp.net主頁中異步加載JQuery。 問題是我用

$( document ).ready(function() {
    //something
}); 

以及幾乎所有子頁面中的其他依賴於JQuery的代碼，這都會導致腳本錯誤：（$未定義），因為JQuery是異步加載到母版頁中的。

如何在母版頁中完成jQuery的異步加載之前，推遲在子頁中解析jQuery代碼？

問題是從母版頁異步加載JQuery並在子頁中使用一些JQuery代碼。 那怎么辦？

Answer 1

注意：不要像大多數人那樣將$.ready(..)與“ jquery ready”相混淆。 $.ready(..)告訴您文檔本身何時准備就緒（已完全解析），而腳本加載（尤其是帶有LABjs之類的動態類）是完全獨立的。 在這里，您實際上是在尋找“是否已加載jquery”，如果可能，應由腳本加載器處理。 您可能還需要等待文檔准備就緒，在這種情況下，您還應該使用$.ready(..) 。 但是不要用一個代替另一個！

---

最簡單的方法（但不一定是最好的方法 ）是在母版頁中聲明一個全局變量，該全局變量包含正在加載主jquery文件的LAB鏈，然后在子頁中將其鏈接。 因此在母版頁中：

var $jqLoading = $LAB.script("jquery.js");

在子頁面中：

$jqLoading.wait(function(){
   // my jquery code goes here
});

---

另一個選擇是依賴LABjs重復數據刪除腳本請求（默認行為），因此只需嘗試在每個子級中加載jquery，但使用與父級相同的URL，LABjs將確保僅加載jquery的一個副本，但是等待一次加載的所有鏈條都會收到通知。 因此，在子頁面中：

$LAB.script("jquery.js").wait(function(){
   // my jquery code goes here
});

這可能會稍微降低效率，但可以避免使用全局變量，這是更好的IMO設計。

---

最復雜的解決方案是使用諸如Promise之類的東西來表示jQuery腳本的加載，然后在每個子頁面中使用該Promise鏈。 這超出了我們在此處介紹的范圍，但是如果您有興趣了解承諾，那么還有很多關於承諾的內容。