在母版页中使用 Lab.js 异步加载 jQuery，然后在子文件中使用 jQuery 代码

Question

我使用 LAB.js 在 asp.net 母版页中异步加载 JQuery。问题是我使用

$( document ).ready(function() {
    //something
});

和其他 JQuery 几乎所有子页面中的依赖代码，这会导致脚本错误：($ is undefined) 因为 JQuery 正在母版页中异步加载。

如何将解析子页面中的 jQuery 代码推迟到母版页面中完成 jQuery 的异步加载？

问题是从母版页异步加载 JQuery 并在子页中使用一些 JQuery 代码。怎么办？

Answer 1

注意： 不要像许多人那样将 $.ready(..) 与 "jquery is ready" 混为一谈。 $.ready(..) 告诉您文档本身何时准备就绪（完全解析），而脚本加载（尤其是像 LABjs 这样带有库的动态类型）是完全独立的。在这里，您实际上是在寻找 "is jquery loaded/ready"，如果可能，它应该由您的脚本加载程序处理。您可能也需要等待文档准备好，在这种情况下您也应该使用$.ready(..)。但是不要用一个代替另一个！

最简单的方法（但不一定是 最好的）是在母版页中声明一个全局变量，该变量包含加载主 jquery 文件的 LAB 链，然后在您的子页面中将其链接起来。所以在母版页中：

var $jqLoading = $LAB.script("jquery.js");

在子页面中：

$jqLoading.wait(function(){
   // my jquery code goes here
});

另一种选择是依赖 LABjs 去重复脚本请求（默认行为），因此只需尝试在每个子项中加载 jquery，但使用与父项相同的 URL ，并且 LABjs 将确保只加载 jquery 的一个副本，但是一旦一个加载完成，所有等待它的链都会收到通知。因此，在子页面中：

$LAB.script("jquery.js").wait(function(){
   // my jquery code goes here
});

这可能稍微效率较低，但它避免了需要全局变量，这是更好的设计IMO。

最复杂的解决方案是使用类似于 promise 的东西来表示 jQuery 脚本的加载，然后在每个子页面中使用该 promise 链。这超出了我们将在此处介绍的内容，但是如果您有兴趣了解它们，还有很多关于承诺的内容。

在母版页中使用 Lab.js 异步加载 jQuery，然后在子文件中使用 jQuery 代码

Using Lab.js in master page to load jQuery asynchronously and then using jQuery code in child files

jquery

asp.net

asynchronous

master-pages

labjs