Question

我需要在调用ajax以启动长时间运行的任务之前完全呈现一个屏幕。即在加载到需要10秒以上的报告（依赖于Web服务）之前加载布局。

我可以通过向页面添加单独的脚本并在加载该脚本时调用Ajax来实现这一点，但这是最好的设计吗？ E.g。

_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>

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

1 个答案: