如何在我處於requirejs內的情況下調用全局加載的api？

Question

我繼承了一個使用magento和foundation的項目。我將requirejs和骨幹包含在這個之上，並且我試圖通過主幹中的hogan（渲染）來獲得正在加載到dom中的基礎軌道畫廊。

我遇到的問題是基礎已經在magento模板之一中全局加載，並且當我在requirejs中渲染幻燈片時，軌道庫已經建好，因此它不顯示幻燈片指標。

基本上，我需要能夠調用$（document）.foundation（）;從我的骨幹視圖中，以便每當我更改幻燈片時以某種方式重新初始化軌道容器。

這裏是正在裝載從Magento的DOM的底部，

<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.min.js"></script> 
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.interchange.js"></script> 
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.orbit.js"></script> 
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.topbar.js"></script> 
<script type="text/javascript" src="skin/frontend/package/theme/js/foundation/foundation.reveal.js"></script> 

這裏是我的requirejs觀點的要點和我試圖完成

define([ 
    'generics/genericView', 
    'foundation', 
    'text!carousel.tpl' 
], function(
    GenericView, 
    foundation, 
    visualCarouselTpl 
) { 

    return GenericView.extend({ 
     'el': 'html', 

     'events': { 
     }, 

     render: function() { 
      var rederedTpl = Hogan.compile(visualCarouselTpl).render({"myImages": imagePaths}); 
      $(".my-carousel").prepend(rederedTpl); 
      $(document).foundation(); 
     }, 

     initialize: function (params) { 
      this.render(); 

      return this; 
     }, 
    }); 
}); 

這裏是模板

<ul data-orbit> 
{{#myImages}} 
    <li> 
     <a href="#"> 
      <img src="{{src}}" alt="{{alt}}" /> 
     </a> 
    </li> 
{{/myImages}} 
</ul> 

在這個特殊的例子中，我需要另一個fo爲了讓這個模塊看到什麼是「基礎」，我打電話給$(document).foundation();。這似乎創造了旋轉木馬，但指標不在我相信，因爲幻燈片被包括在旋轉木馬渲染後。

綜上所述，我需要能夠做以下（最好是第一個）之一

1. 納入全球基礎API的進入需要，並用它來重新初始化訃告畫廊。
2. 要求所有相同的基礎文件通過require並以這種方式重新初始化軌道庫。然而，如果可能的話，我不想兩次加載基礎庫，所以我需要弄清楚如何從這個DOM首先刪除那些dom。雖然我想我可以加載他們兩次，如果它更容易。

到目前爲止，我試圖呼籲$(document).foundation();有和沒有它被納入要求。有沒有包含到要求（因爲它沒有看到基礎）的JavaScript錯誤，並有一個JavaScript錯誤

當基礎是需要的。

Answer 1

下面是使用jquery.cookie來重新創建您的問題，它也是一個小插件，可以修改jQuery對象。

在這個例子中，有一個全局的jQuery經由<script>加入，這是2.2.4版本和RequireJS配置內，還有另一種，這是3.2.1。這樣我們可以比較。

運行代碼，看看會發生什麼。

var globaljQuery = jQuery; 
 

 
require.config({ 
 
    paths: { 
 
     "jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min", 
 
     "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min" 
 
    } 
 
}); 
 

 
require(['jquery-cookie'], function() { 
 
    console.log("Old Global jQuery Version: " + globaljQuery().jquery); 
 
    console.log("Old Global Cookie add-on exists: " + Boolean(globaljQuery.cookie)); \t 
 
    console.log("New Global jQuery Version: " + jQuery().jquery); 
 
    console.log("New Global Cookie add-on exists: " + Boolean(jQuery.cookie)); \t 
 
});

<!-- Global jQuery --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>

在這種情況下該插件，瞭解它是在AMD環境和使用RequireJS訪問jQuery的。現在已經創建了2個jQuery對象，不幸的是只有1個被修改以包含插件。

就你而言，你現在不能刪除全局變量，但你的解決方案應該是在RequireJS上下文中使用全局變量。

A）使用此代碼創建一個模塊：

define(function() { return jQuery; }); 

，然後用你的path配置指向jquery有

這可以通過兩種方式來完成。

B）稍微乾淨是使用callback配置選項：

require.config({ 
    callback: function() { 
    define('jquery', function() { return jQuery; }); 
    }, 
    ... 

看到它在行動：

var globaljQuery = jQuery; 
 

 
require.config({ 
 
    callback: function() { 
 
     define('jquery', function() { return jQuery; }); 
 
    }, 
 
    paths: { 
 
     "jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min", 
 
     "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min" 
 
    } 
 
}); 
 

 
require(['jquery-cookie', 'jquery'], function(cookiePlugin, requiredjQuery) { 
 
    console.log("Old and New Global jQuery equal?: " + (globaljQuery === jQuery)); 
 
    console.log("Global and Required jQuery equal?: " + (jQuery === requiredjQuery)); 
 
});

<!-- Global jQuery --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>