Javascript YepNope-等待依赖项加载
在ASP.NET母版页中,我使用YepNope无条件地异步加载jQuery(从Google CDN,使用本地回退)和一些脚本,这些脚本用于站点中的所有页面。在母版页中,我创建了一个ContentPlaceHolder,位于结束正文标记之前(以及加载所有页面上使用的内容的YepNope脚本的下方),用于单个页面上使用的脚本。由于jQuery应该在站点的每个页面上都可用,所以不应该在有特定脚本使用它的页面上单独加载jQuery 我遇到的问题是,我不能在加载jQuery的yepnope脚本中使用回调函数或完整函数,因为这是在母版页上,并且这些是仅在该页上使用或添加的单独页面脚本,但我需要能够将单独页面脚本的执行延迟到yepnope(显示在页面脚本上方)已完成加载其中使用的任何依赖项(如jQuery) 我可以想出两个选择- 1-将页面上使用的脚本设置为外部文件,并使用语法加载该文件-Javascript YepNope-等待依赖项加载,javascript,asp.net,asynchronous,master-pages,yepnope,Javascript,Asp.net,Asynchronous,Master Pages,Yepnope,在ASP.NET母版页中,我使用YepNope无条件地异步加载jQuery(从Google CDN,使用本地回退)和一些脚本,这些脚本用于站点中的所有页面。在母版页中,我创建了一个ContentPlaceHolder,位于结束正文标记之前(以及加载所有页面上使用的内容的YepNope脚本的下方),用于单个页面上使用的脚本。由于jQuery应该在站点的每个页面上都可用,所以不应该在有特定脚本使用它的页面上单独加载jQuery 我遇到的问题是,我不能在加载jQuery的yepnope脚本中使用回调函
yepnope('/url/to/your/script.js');
或
我不确定我是否喜欢这个想法,因为它为几行javascript引入了一个额外的HTTP请求,这不会在任何其他页面上使用
2-在另一个yepnope测试对象块中再次加载jQuery,使用complete函数包装页面脚本(在没有测试的情况下调用complete似乎会在加载前面的脚本之前立即执行该函数),并依赖以下命令-
我请求了两次文件,但只加载了一次
demand,在YepNope1.5+中,我们添加了脚本所具有的功能
已被请求,在被请求时不会重新执行
第二次。当你处理较少的问题时,这会很有帮助
复杂的服务器端模板系统,您真正关心的是
您的所有依赖项都可用
在该页面中,我可以从Google CDN加载相同版本的jQuery,基于上述情况,实际上不会加载两次,然后在一个匿名函数中加载页面脚本,该匿名函数由yepnope测试对象的完整函数调用
从正面来看,这意味着页面不再依赖于从母版页加载的jQuery,但负面的情况是(即使假设YepNope现在没有两次加载脚本)如果母版页中的版本在将来不会发生相同的情况,我们将加载多个版本的jQuery。从维护的角度来看,我觉得这不是一个好主意,特别是在假设(我觉得你应该一直这样做)另一个开发人员将是做出更改的人的情况下
它似乎也不是特别优雅
总的来说,我几乎肯定会使用第一个选项,但我想知道是否有办法延迟或延迟页面上的脚本,直到异步加载完成,而这不能作为加载资源的YepNope测试对象的一部分来完成
其他开发人员是如何解决这个问题的?我提出了一个我非常喜欢的解决方案 在母版页YepNope测试对象中添加代码-
complete: function() {
if (window.pageFunctions !== null && typeof (window.pageFunctions) === "function") {
window.pageFunctions();
}
}
如果我想添加任何依赖于母版页中加载的依赖项的JavaScript代码或函数,我只需将它们包装在一个名为“pageFunctions”的函数中,如下所示-
函数pageFunctions(){
$(文档).ready(函数(){
...
});
}
我仍然对其他(可能更好的)解决方案感兴趣,所以我将把这个问题保留几天
我也很感谢大家对这个问题的评论
complete: function() {
if (window.pageFunctions !== null && typeof (window.pageFunctions) === "function") {
window.pageFunctions();
}
}
<script type="text/javascript">
function pageFunctions() {
$(document).ready(function () {
...
});
}
</script>