在初始頁面加載時通過Ajax加載內容的設計模式

Question

在調用ajax啓動長時間運行的任務之前，我需要完全呈現一個屏幕。即在加載之前加載佈局需要10秒以上的報告（依賴於Web服務）。

我可以通過向頁面添加一個單獨的腳本並在該腳本加載時調用Ajax來做到這一點，但這是最好的設計嗎？例如。

_myreport.js：

$(document).ready(function() { 

    var report = { 
     load: function() {  
      //test for report-container and run Ajax load if it exists 
     } 
    } 

    report.load(); 
}); 

我可能有這幾頁，我特別不喜歡有多個不同的頁面的多個腳本。或者，當可能或可能不需要Ajax調用（並且容器可能存在或不存在）時，我可能希望跨多個頁面重新使用腳本。我可以在運行Ajax之前檢查容器的存在，但對我來說這並不像一個好的設計。我希望在需要時調用它，而不是在每個頁面加載時調用它，然後通過現有容器測試它是否適用。

我試圖把一個小調用該函數體內的容器後，但這會導致錯誤的report.load()功能尚未定義：

template.phtml

<div id='report-container'></div> 
<script> 
$(document).ready(function() { 
    report.load(); 
}); 
</script> 

什麼是這樣做的通用/標準和乾淨的方式，我可以跨多個應用程序重用？

Answer 1

report.load尚未定義，因爲它在$（document）.ready中變形。 您正試圖在報表容器加載完之後但在整個DOM之前調用它。 如果你聲明你的ajax加載函數在$（document）.ready之外，它將是可用的。 與調用它相同，你正在運行一個腳本後div加載，但因爲它包裹在$ .ready，而不是馬上執行，它等待其餘加載... 這樣的事情應該工作

// not wrapped in $(document).ready 
var report = { 
    load: function() { 
     // not sure if you need to test for container, this function is called after it loads 
     //run Ajax 
    } 
} 

<div id='report-container'></div> 
<script> 
// not wrapped in $(document).ready 
report.load(); 
</script>