在初始頁面加載時通過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之前調用它。 如果在$（document）.ready之外聲明ajax加載函數，它將可用。 與對它的調用相同，您在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>