jquery - Bootstrap Collapse 与多个 jquery 和 bootstrap.js 冲突；需要.js

Question

我有一个 Web 应用程序(我们将其称为 WA1)，它使用 RequireJS 加载 jQuery 和 Bootstrap.js。此应用程序构建到单个文件 (main.built.js) 中，并在不同 Web 应用程序 (WA2) 上的页面元素内运行。

(WA1 也可以独立运行 - 无需内置到 WA2 中)

WA2 正常加载 jQuery 和 Bootstrap.js，但 main.built.js 文件还包含 jQuery 和 Bootstrap.js。

WA1 的部分 UI 包含 Bootstrap 折叠元素。折叠/展开的 Action 是由放入 html 中的数据属性触发的。如果你看this fiddle ，应该折叠的元素无法折叠 - 我认为是因为折叠操作被触发两次 - 一次由 WA2 Bootstrap.js 文件中的监听器触发，一次由 main.built.js 文件中的监听器触发。

我希望折叠能够正常运行，但我无法选择从 WA2 中删除 Bootstrap.js。我也无法选择在 WA2 中使用 RequireJS。

有没有办法让 WA1 不使用 require.js 加载 jQuery 和 Bootstrap.js，但允许通过 require.js 加载的模块使用正常加载的 jQuery 和 Bootstrap(无需 RequireJS)？如果没有，jQuery 的 $.noconflict() 有帮助吗？我不太熟悉它是如何工作的。

Answer 1

我最终做了以下事情:

• 在加载任何 require 模块(包括 jQuery)之前，我会检查 jQuery 是否已经存在(如果我在 WA2 中运行，它确实存在)。如果是，我将 $isloaded 设置为 true。

• 加载 require bootstrap.js 后，如果 $isloaded 为 true，我设置 $.fn.collapse = function(){ }。

这样，只有 WA2 加载的 jquery/bootstrap 中的 $.fn.collapse 函数才会执行某些操作。感觉有点老套，但它确实有效。

fiddle :http://jsfiddle.net/wSPXP/17/