YepNope - 等待加载依赖项

时间:2013-02-17 17:05:34

标签: javascript asp.net asynchronous master-pages yepnope

在ASP.NET主页中,我使用YepNope无条件地和异步地加载jQuery(来自谷歌CDN,带有本地回退)和一些在网站的所有页面上使用的脚本。在MasterPage中,我在关闭正文标记之前(以及加载所有页面上使用的YepNope脚本下方)创建了一个ContentPlaceHolder,用于单个页面上使用的脚本。由于jQuery应该可以在站点的每个页面上使用,因此不应该在具有使用它的特定脚本的那些页面上单独加载。

我遇到的问题是我无法在加载jQuery的yepnope脚本中使用回调函数或完整函数,因为这是在MasterPage上,这些是单独的页面脚本,仅在该页面上使用或添加,但我需要能够延迟单个页面脚本的执行,直到yepnope(显示在页面脚本上方)已经完成加载其中使用的任何依赖项(例如jQuery)。

我可以想到两个选项 -

1-使页面上使用的脚本成为外部文件,并使用语法

加载它
yepnope('/url/to/your/script.js'); 

yepnope({ load: '/url/to/your/script.js' });

我不确定我喜欢这个想法,因为它为几行javascript引入了额外的HTTP请求,不会在任何其他页面上使用。

2-在另一个yepnope测试对象块中再次加载jQuery,完整的函数包含页面脚本(在没有测试的情况下调用完成似乎在加载前面的脚本之前立即执行该函数)并依赖于以下内容 -

  

我要求两次文件并且只加载一次?受欢迎   需求,在yepnope 1.5+我们添加了脚本的功能   已被要求在被要求时不被重新执行a   第二次。当您处理较少的事情时,这可能会有所帮助   复杂的服务器端模板系统,你真正关心的是   所有的依赖项都可用。

在页面中,我可能会从Google CDN加载相同版本的jQuery,基于上面的内容实际上不会加载两次,然后将页面脚本加载到从yepnope的完整函数调用的匿名函数中测试对象。<​​/ p>

从好的方面来看,这意味着页面不再依赖于从MasterPage加载的jQuery,但是负面的是(即使假设YepNope现在不加载脚本两次)我们将加载多个版本的jQuery应该更改MasterPage中的版本,以防将来在页面中发生同样的事情。从维护的角度来看,我觉得这不是一个好主意,特别是在假设(我觉得你应该总是这样)的情况下,另一个开发人员会做出改变。

它似乎也不是特别优雅。

总的来说,我几乎肯定会使用第一个选项,但我想知道是否有一种方法可以延迟或推迟页面上的脚本,直到完成异步加载,这不能作为YepNope测试对象的一部分来完成加载资源。

其他开发人员如何解决此问题?

1 个答案:

答案 0 :(得分:2)

我想出了一个我喜欢的解决方案。

在MasterPage YepNope测试对象中添加代码 -

complete: function() {
                if (window.pageFunctions !== null && typeof (window.pageFunctions) === "function") {
                    window.pageFunctions();
                }
            }

如果我想添加依赖于MasterPage中加载的依赖项的任何JavaScript代码或函数,我只需将它们包装在名为“pageFunctions”的函数中,就像这样 -

<script type="text/javascript">
    function pageFunctions() {
        $(document).ready(function () {
            ...
        });
    }
</script>

我仍然对其他(可能更好的)解决方案感兴趣,所以我要将问题保持开放几天。

我也很感谢您对此的评论作为解决方案。