如果在HTML中引用了多个版本的JS文件（Bootstrap），哪个优先？

Question

HTML加载它的库从页面顶部开始到底部正确吗？如果您在较新版本下面引用了较旧版本的框架/库（例如jQuery或Bootstrap），该怎么办？

HTML中引用的两个版本的Bootstrap如何优先？

1. 最后库是否优先？

2. 最新的 JS版本是否优先？

3. 这两个JS版本会累积加载吗？

这同样适用于其他库，例如CSS吗？

如果我在这里弄错了网页条款，请道歉。我对Web开发以及不同组件如何协同工作仍然相当新。谢谢！

• Bootstrap 3.0.2
• Bootstrap 3.3.7 新版本

Answer 1

如果它们是不同的文件（.js和.min.js），它们都会累积加载）。如果他们定义相同的JavaScript变量，则在同一范围内，第二个显示的库将会/应该获胜。发生这种情况是因为第一个库中定义的变量将从第二个库中重新分配新值。在您的示例中，包括页面中bootstrap.js的缩小版本和非缩小版本，以最后一个为准，获胜。

如果两个库使用具有相同特异性级别的相同精确选择器/类名，那么CSS也会发生这种情况。因此，再次使用包含两个版本的bootstraps CSS的示例，将应用第二个版本。由于它们是两个不同的版本，从第一个引用的库到第二个库可能会有一点点流失，所以可见性你可能会注意到一些奇怪的副作用。

仅供参考：您可能已经知道这一点，但另一位读者可能只想包括两者。包含两组文件并不是一个好习惯，因为它可能会导致意外结果，会增加页面重量和发送到服务器的请求数量，这会影响您的加载时间，最终会影响您的用户经验。

Answer 2

多个JavaScript版本可以在同一页面上共存。

这可能发生在使用不同版本的jQuery支持的不同框架的页面上。大多数开发人员会尝试避免使用多个版本的库，但是如果修复已经使用多个版本编码的客户端站点，则可能没有那么奢侈。

要直接回答您的问题，JavaScript库中的最后一个函数优先，假设它们的定义完全相同，否则两个库基本上会合并。如果函数从两个参数更改为三个参数，则它们都将处于活动状态，并且其行为就像它们被设计重载一样。

有一些方法可以使用变量作为别名来引用JS文件的版本，如下例所示，也有一些库支持多个组件，例如通过客户端库文件夹的Adobe AEM和带有别名的前缀组件但是它内置于整个解决方案中。

以下是JQuery

的示例

<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>

当加载多个版本时，每个框架的行为可能会有所不同，这就是为什么开发人员可能会尽可能避免使用它。

使用层叠样式表（CSS） last 样式优先

如果需要覆盖引导样式，则应该覆盖最后放置的引导样式。这假设具有更高特异性的规则的完全相同的特异性水平将优先于更通用的规则，无论它在何处被加载。