確保腳本可用性的模式或技巧？

Question

作爲一個我一直在研究的項目已經發展壯大，因此當其他代碼嘗試訪問它們時，頁面上的所有腳本都不可用。儘管在更新代碼（例如，不緩存）後，這種情況經常發生，但我從未嘗試過的時候會越來越多地出現在測試中。

我已經解決了這個問題，部分是通過使用函數來等待模塊可用（請參閱this question），這主要解決了這個問題，但我並不完全對實現感到興奮，並且期待爲更多的工業強度模式來解決這個問題。以下是可能的解決方案，我想出來的：

1）加載腳本上的東西，如ensure需求 - 不理想。需要在每個腳本中包含實際的腳本名稱相關性信息，而不僅僅是模塊/對象名稱。在使用資源確保其可用之前，仍然需要採取一些措施。

2）管理腳本加載順序。如果這樣做甚至會起作用（例如，我不認爲在腳本B之前簡單地放置腳本A以確保它將可用，因爲它們可以同時加載），這將是一種痛苦，因爲直到你「已經加載了依賴於它的東西。在一個擁有大量使用不同資源的頁面的網站上進行設置需要很多工作（並且我無意在每個頁面上加載站點上到處都使用的所有內容）。

3）等待一切在允許用戶交互之前加載到給定頁面上。出於顯而易見的原因，這遠非理想。仍然沒有解決在初始化代碼中發生的依賴關係。

4）展開我當前的解決方案。目前工作方式類似（這是僞代碼，但基本的邏輯過程）：

// Depends on Module2 
Module1 = (function() { 
    self = {}; 
    // function requires dependency 
    // waitFor waits until global named 'dependency' is available then calls callback 
    self.initialized=false; 
    self.init = function() { 
     waitFor('Module2', function() { 
      self.intialized=true; 
     }); 
    } 
    // waitForInitialization sets a callback when self.initialized=true 
    self.func = self.waitForInitialization(func() { 
      Module2.doStuff(); 
     }); 
    } 
    //UI-initiated function requires dependency 
    self.uiFunc = function() { 
     if (!self.initialized) { 
      showPleaseWaitDialog(); 
      self.waitForInitialization(function() { 
       dismissPleaseWaitDialog(); 
       self.uiFuncImpl); 
     } else { 
      self.uiFuncImpl(); 
     } 
    } 
    self.uiFuncImpl= function() { 
     Module2.doStuff(); 
    } 
}()); 

我能想到的方法來創建一個原型，將更加透明地處理的依賴問題比我上面的代碼，並且完全打算如果必須這樣做，但這真的是最好的解決方案嗎？別人做什麼？什麼被認爲是最佳實踐？

Answer 1

2）腳本加載順序 - 腳本會一直在它們被放置在DOM中的順序來執行，因此，儘管他們可能會同時加載他們將在一種有序的方式（在一個大的項目，我的工作就面臨着同樣的問題執行）。

？）如果腳本加載順序不適合您，您可以查看Promise模型。如果承諾和加載順序不適合你，你可以聽一個命名空間的事件，每個模塊在初始化時可以觸發，這樣，如果對象存在，它可以被使用，如果不是它的初始化可以聽。