完成加載後分別渲染每個模塊

Question

我有一個應用程序，它具有多個模塊，只要完成加載就需要渲染。這個想法是，無論其他模塊的狀態如何，每個模塊都執行其專用的渲染功能。

這裏的主要模塊的實現：

;(function(doc, win, undefined) { 
    'use strict'; 

    define(['module', 'domReady!'], function(main) { 
     var modules = main.config().modules; 
     while (modules.length) { 
     require([].concat(modules.shift()), function(module) { 
      module.init(); 
     }); 
     } 
    }); 

}(document, window)); 

看來，儘管它已經加載之後每個模塊應該呈現的權利，沒有出現所有的模塊都完成加載之前在屏幕上。這會導致進入應用程序時發生滯後，並且不會指示應用程序已開始執行。什麼可能會導致這種行爲，以及如何儘可能地平滑應用的初始化？

Answer 1

它不是提供您正在尋找的效果的AMD語義的一部分。唯一的保證是，在加載依賴數組中列出的與回調一起列出的模塊及其依賴關係之前，您傳遞給require的回調將不會運行。

RequireJS對瀏覽器如何將請求發送到服務器沒有很好的控制。例如，如果發生請求時，瀏覽器已經有太多其他請求待處理（對於樣式表，圖像或除了通過require要求的模塊之外必須加載的其他內容），瀏覽器可能會決定推遲RequireJS的請求，直到先前的請求得到解決。

如何在服務器端解析請求也影響按什麼順序發生。

然後就是你的應用程序的結構。假設main.config().modules包含['A', 'B', 'C']。所以你要按順序加載A，B,C並讓它們儘快初始化。但是，事實證明，所有這些模塊也取決於jquery。當RequireJS執行A時，它運行define(['jquery], function ($) {...。好的，現在必須提取jquery。在獲取jquery時，可能是B和C也將等待它。因此RequireJS將執行A,B,C，並且回調函數以接近的順序等待它們。只需要一個依賴關係，它可能不是什麼大問題，但是如果你的模塊依賴於其他普通模塊，它會相加並且最終的結果是在普通模塊被加載時你得到了明顯的等待，然後它看起來像A ，B,C成批執行。

可以通過使用RequireJS自己的優化器或其他優化器來理解AMD模塊，以嘗試將模塊組合成有利於您正在查找的結果的捆綁包。做這種優化需要開發人員仔細分析應用程序的結構。在一般情況下，沒有單個標誌，選項或插件，您可以打開以獲取您之後的結果。而且，正如上面提到的，瀏覽器和服務器可能會以某種方式工作，從而將其全部用完。

---

我應該提到的一件事是完整性。您可以強制順序初始化但請求前一個已加載後僅一個模塊：

;(function(doc, win, undefined) { 
    'use strict'; 

    define(['module', 'domReady!'], function(main) { 
     var modules = main.config().modules; 
     function next() { 
     var name = modules.shift(); 
     if (name === undefined) { 
      return; 
     } 

     require([name], function (module) { 
      // When one module has loaded, we initiate the request for the 
      // next one. 
      next(); 

      // And init what we've got now. 
      module.init(); 
     }); 
     } 

     next(); 
    }); 
}(document, window)); 

然而，這裏的代價是B要求A已加載之後纔等。而在您的原始代碼中，所有模塊都請求關閉。這可能會導致總的初始化時間更長。