为什么要两次声明 jQuery？ [复制]答案

【问题标题】：Why declare jQuery twice? [duplicate]为什么要两次声明 jQuery？ [复制]
【发布时间】：2016-08-21 02:43:55
【问题描述】：

以下代码的目的是什么？

请注意，在下面的第二个脚本代码之前，jquery.min.js 已经包含在 googleapis 中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script>

【问题讨论】：

是的，主要是速度优势。 Read more here
如果你已经有了jquery，加载它会更快。拥有它的最佳机会是当它被许多网站托管在同一个地方时。所以基本上，你想先尝试一下，然后一劳永逸地得到它。如果失败，获取本地版本。
这是一个 CDN 后备，如下所述：Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
在第二次检查完成之前，是否有任何保证 jquery 会从服务器上完全加载？
@user1438893 是的。浏览器在加载前一个脚本时不会开始执行另一个脚本（除非它被指示不这样做，而这里不是）。如果不是这样，就不可能使用任何第三方库，或者事实上，任何依赖于另一个脚本的脚本。

标签： javascript jquery

【解决方案1】：

当CDN 关闭或无法访问时，将回退到存储在同一服务器上的jquery.min.js 文件。

本质上是在说：

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined:
if (window.jQuery) {
    // Yes, it's defined. Good. Nothing more needed.
}
else {
    // No, it's not defined. Use my copy:
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')
}

Read more here可以找到原码here。

关于window.jQuery || document.write(...)，它本质上是上面代码的简写。当window.jQuery 定义为truthy 时|| 右侧的语句将不会被执行；但是，如果它没有被定义，它将是falsy，并且||右侧的语句将被执行。

【讨论】：

很酷的概念，我以前从未见过这个。我们是否保证第一个
@loneboat 是的，它会在继续解析页面之前尝试下载并运行脚本 (Source)。这就是为什么如果您按特定顺序放置脚本标签，它将按该顺序运行脚本，而不是先完成下载
酷，不知道。我[错误地]认为当它遇到一个外部链接的
@loneboat 顺便说一句，HTML5 提供了 async 属性，它使 <script> 标记的行为方式与您刚才描述的方式相同

【解决方案2】：

它首先尝试使用托管在 Google 的 CDN 上的版本。浏览该网站的人有可能已经缓存了访问其他网站的确切脚本，所以他们不妨先尝试一下。

如果加载CDN版本，window.jQuery被设置，或短路，代码继续运行。

如果由于某种原因无法加载 CDN 版本，它会在页面中添加另一个脚本标记，指向脚本的本地托管版本。

编辑：正如 MTCoster 在 a comment above 中指出的那样，这个技巧依赖于 JavaScript 的正常加载方式。浏览器暂停执行，直到标签加载或超时。如果 jQuery 是使用 async 属性异步加载的，这个技巧就行不通了。

【讨论】：

【解决方案3】：

第一个脚本将尝试从外部网站（在本例中为 Google CDN）加载 jQuery。

第二个会尝试在window 中找到jQuery 对象，只有当它没有找到它时，它才会从内部链接加载库。这只是在 CDN 失败的情况下的后备。

window.jQuery || document.write(...)
// the code above means the same as the code below
if (window.jQuery === undefined) document.write(...)

在 Javascript 中，除了布尔值（真/假）之外，还有真值和假值。与0、false、undefined 和null 不同的任何内容都是真实值。

在这种情况下，如果 jQuery 属性存在于 window 上，它将是一个对象，并且它将是一个真实值，因此，第二个语句将不会运行（因为第一个语句已经为 true - 并且在OR 运算符中，如果任何语句为真，则跳过其他语句（从左到右）。

虽然，如果jQuery 属性不存在，那是因为第一个脚本没有正确加载，并且该属性将是undefined，这是一个虚假值。因此，第二条语句将运行，本地 jQuery 将作为后备加载。

【讨论】：

window.jQuery || ... 与window.jQuery === undefined不相同，如果window.jQuery 是0、false 或null 如你所说。

【解决方案4】：

如果由于防火墙阻止、CDN 关闭等原因无法访问 CDN 中的 jquery，这是一种回退机制

我将添加一个去年遇到的实际场景。我的一位客户决定在没有互联网的情况下在局域网中托管和使用我创建的 Web 应用程序。使用本地 IIS，应用程序已正确部署，但由于 CDN 不可用而失败，如果我使用了有问题的代码，Web 应用程序将在第一次运行时无需任何更改。

我希望它现在有意义:) 对我来说这是一个教训。

【讨论】：