为什么声明 jQuery 两次？

以下代码的用途是什么？

请注意，在下面的第二个脚本代码之前，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>
6297 次浏览
小开
最佳答案

当 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>')
}

阅读更多 ，您可以找到原始代码 给你。

关于 window.jQuery || document.write(...)，它基本上是上面代码的简写。当定义 window.jQuery时，将执行 || 不会右侧的语句 真心话; 然而，如果没有定义它，将执行 假的，并执行 || 威尔右侧的语句。

小开

它试图首先使用谷歌 CDN 托管的版本。有可能浏览站点的人已经在访问其他站点时缓存了相同的脚本，所以他们不妨先尝试一下。

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

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

编辑: 正如 MTCoster 在 上面的评论中指出的，这个技巧依赖于 JavaScript 的正常加载方式。浏览器将暂停执行，直到标记加载或超时为止。如果使用 异步属性异步加载 jQuery，那么这个技巧将不起作用。

小开

第一个脚本将尝试从外部网站(在本例中是 GoogleCDN)加载 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 中，除了布尔值(true/false)之外，还有真值和假值。任何与 0、 false、 undefined和 null不同的值都是真值。

在这种情况下，如果 jQuery属性存在于窗口中，那么它将是一个对象，并且它将是一个 true 值，因此，第二个语句将不会运行(因为第一个语句已经为 true-在 OR操作符中，如果任何语句为 true，它将跳过其他语句(从左到右)。

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

小开

如果由于诸如防火墙阻塞、 CDN 关闭等原因而无法访问来自 CDN 的 jquery，那么这是一种回退机制

我将增加一个我去年面临的更加实际的情况。我的一个客户决定托管和使用由我创建的网络应用程序在局域网没有互联网可用性。使用本地 IIS，应用程序部署正确，但由于 CDN 不可用而失败，如果我使用了上述代码，Web 应用程序将在没有任何更改的情况下第一次工作。

我希望它现在能说得通:)对我来说，这是一个教训。


提交答案