在初始页面加载时通过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>