在初始页面加载时通过 Ajax 加载内容的设计模式

Question

在调用 ajax 启动长时间运行的任务之前，我需要完全渲染一个屏幕。 IE。在加载需要 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>