Bootstrap摺疊與多個jquery和bootstrap.js的衝突; require.js

Question

我有一個使用RequireJS加載jQuery和Bootstrap.js的web應用程序（我們稱之爲WA1）。這個應用程序被內置到一個單獨的文件（main.built.js）中，並運行在不同Web應用程序（WA2）上的頁面元素內。

（WA1可以獨立運行，以及 - 沒有得到內置WA2）

WA2負荷jQuery和Bootstrap.js正常，但main.built.js文件還包含jQuery和Bootstrap.js。

WA1的UI的一部分包含Bootstrap摺疊元素。摺疊/解開的動作是由放入html中的數據屬性觸發的。如果你看看this fiddle，應該摺疊的元素不能摺疊 - 我認爲是因爲摺疊動作被觸發兩次 - 一次由WA2 Bootstrap.js文件中的監聽器，一次由main.built中的監聽器.js文件。

我想崩潰正常工作，但我沒有從WA2中刪除Bootstrap.js的選項。我也不能在WA2中使用RequireJS。

有沒有辦法讓WA1不加載jQuery和Bootstrap.js與require.js，但允許通過require.js加載的模塊使用jQuery和Bootstrap將正常加載（不需要RequireJS）？如果沒有，jQuery的$.noconflict()可以幫忙嗎？我不太熟悉這是如何工作的。

Answer 1

最後我做了以下內容：

• 之前，我加載任何需要的模塊（包括jQuery的），我檢查的jQuery已經存在（它如果我存在m在WA2中運行）。如果可以，我將$isloaded設置爲true。

• 加載require bootstrap.js後，如果$isloaded是true，我設置了$.fn.collapse = function(){}。

這樣，只有WA2加載的jquery/bootstrap中的$ .fn.collapse函數纔會執行某些操作。感覺一種哈克，但它的工作。

小提琴：http://jsfiddle.net/wSPXP/17/

Answer 2

我以前有過類似的問題。它讓我感到懊惱，直到今天我遇到了它，但我很高興知道我不是唯一的一個。

我的解決方法與您確定的一樣，使用$.noConflict(true)。

您將需要兩個需要配置腳本。

對於WA1，您需要以正常方式配置require。這將使你運行它作爲一個獨立的Web應用程序，獨立WA2的：

require.config({ 
    paths: { 
     'jquery': '//code.jquery.com/jquery-1.11.0.min.js', 
     //... 
    } 
}); 

對於WA2，你需要配置要求如下所示：

require.config({ 
    paths: { 
     'jquery': 'src/jquery-no-conflict', 
     'jquery-src': '//code.jquery.com/jquery-1.11.0.min.js', 
     //... 
    } 
}); 

在jQuery的無衝突.js文件，我們加載了jQuery，但恢復全球$由WA2加載的版本：

define(['jquery-src'], function ($) { 

    //unload the newly loaded version of jQuery 
    $.noConflict(true); 

    //return the original version 
    return $; 
}); 

現在，從WA2加載時，在您的WA1功能define會調用jQuery的無-C onflict.js

我不喜歡這種模式的唯一情況是，您的HTML for WA1現在包含兩個對jQuery的引用，儘管全局的$仍然會指向加載的第一個jQuery實例。

雖然我還沒有嘗試過，想必你可以使用應用了類似的模式引導的noConflict

請讓我知道你上車。

Answer 3

這是一種方法來做我理解你想要做的事情。 console.log聲明只是爲了檢查發生了什麼。如果我只是在你撥弄你的require調用（和require.config呼叫後）前添加下面的代碼段，然後將摺疊元件正常工作：

(function() { 
    define("jquery-fake", [], function() { 
     console.log("jquery-fake"); 
     // Just return the already loaded jQuery. 
     return $; 
    }); 

    define("bootstrap-fake", ["jquery"], function() { 
     console.log("bootstrap-fake"); 
     // Nothing to be done here. 
    }); 

    var map = {}; 

    if ($) 
     map.jquery = "jquery-fake"; 

    if ($.fn.popover) 
     map.bootstrap = "bootstrap-fake"; 

    require.config({ map: { "*": map } }); 
})(); 

如果你不以上將無法正常工作也從從「外部資源」列表中刪除jQuery。現在，它在之前被加載兩次RequireJS開始加載任何內容。

預修課程：

1. 這必須在初始require.config調用後出現，但你開始加載任何東西之前。

2. 爲WA2加載的jQuery和Bootstrap在此代碼運行之前必須已加載。

工作原理：

1. 它檢測是否jQuery是通過檢查$設置加載。

2. 它通過檢查$.fn.popover是否存在來檢測Bootstrap是否已加載。我不知道是否通過了驗證方式來檢查Bootstrap是否已加載。我檢查了代碼，沒有看到$.fn.bootstrap或類似的東西，這大概是Bootstrap獨有的。它確實設置了一個popover方法，這就是我使用的方法。

3. 當這些被檢測爲已經存在，則地圖爲「*」被填充使得當需要jqueryjquery-fake代替加載，並且類似地對於bootstrap。

4. 這兩個假模塊是您在代碼中早期定義的那些模塊。他們實際上沒有加載任何東西。

Fiddle