YepNope-等待，直到加载依赖项

YepNope - Waiting until dependencies loaded

本文关键字：加载 依赖 等待 YepNope-      更新时间：2023-09-26

在ASP中。NET Masterpage我使用YepNope无条件异步加载jQuery（从Google CDN，带本地回退）和一些在网站中所有页面上使用的脚本。在MasterPage中，我在结束正文标记之前创建了一个ContentPlaceHolder（位于加载所有页面上使用的内容的YepNope脚本下方），该标记用于单个页面中使用的脚本。由于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，完整的函数封装页面脚本（在没有测试的情况下调用complete似乎会在加载之前立即执行该函数），并依赖于以下-

我请求了两次文件，却只加载了一次？按流行需求，在yepnope 1.5+中，我们添加了脚本已被请求，在请求时不重新执行第二次。当你处理更少的问题时，这会很有帮助复杂的服务器端模板系统，而您真正关心的只是您的所有依赖项都可用。

在页面中，我可以从Google CDN加载相同版本的jQuery，基于上述内容，它实际上不会加载两次，然后在yepnope测试对象的完整函数中调用的匿名函数中加载页面脚本。

从好的方面来说，这意味着页面不再依赖于从MasterPage加载的jQuery，但消极的方面是（即使假设YepNope现在没有加载两次脚本），如果MasterPage中的版本发生变化，我们将加载多个版本的jQuery。从维护的角度来看，我觉得这不是一个好主意，尤其是假设（我觉得你应该一直这样做）另一个开发人员会做出改变。

它看起来也不是特别优雅。

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

其他开发人员如何处理这个问题？

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

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

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

如果我想添加任何依赖于MasterPage中加载的依赖项的JavaScript代码或函数，我只需将它们包装在一个名为"pageFunctions"的函数中，比如so-

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

我仍然对其他（可能更好的）解决方案感兴趣，所以我将把这个问题留几天。

我也非常感谢对这一解决方案的评论。

相关文章：