如何在我处于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>