javascript - 将 requireJS 与 jquery 相关库一起使用(响应式 Iframe)

Question

我在理解 requireJS 依赖管理方面遇到了很多麻烦。我已多次阅读文档和所有在线资源，但我似乎无法使其正常工作。

结束场景:我有一个可嵌入的小部件，最终会将响应式 iFrame 附加到页面。假定外部页面具有某个版本的 jQuery，但为了安全起见，我包含了我自己的 jQuery。

我正在使用一个名为 responsiveIframe 的库，这取决于 jQuery。

基本上，当我从 require 函数内部调用 $('#responsive-frame').responsiveIframe({xdomain: '*'}); 时，我得到一个未定义的函数错误。当我将 $ 更改为 jQuery 时，它可以工作，因为它能够使用页面上现有的库(不是我想要的)。

这是代码(假设路径全部有效):

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    'jquery': 'jquery-1.11.1.min',
    'responsiveIframe': 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

require(['jquery', 'responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({
    xdomain: '*'
  });
});

我尝试过使用各种垫片，如下所示:

  shim: {
    responsiveIframe: {
      init: function() {
        return this.responsiveIframe
      }
    }
  }
  ,
  shim: {
    'responsiveIframe': ['jquery']
  }
  ,
  shim: {
    'responsiveIframe': {
      'deps': 'jquery',
      'exports': 'ResponsiveIframe'
      'init': function() {
        return this.responsiveIframe.noConflict()
    }
  }

我觉得我错过了一些有关 requireJS 的基本知识。任何帮助将不胜感激，如果您需要更多信息，请告诉我:)

编辑

另外，将我的responsiveiframe.js 库包装在其中:

define(['responsiveIframe', 'jquery'], function(ri, jQuery) {

似乎有效......但这看起来很“hacky”。​​

编辑 #2

我可以通过像这样包装responsiveIframe库来使其工作:

define(['jquery'], function(jQuery) {

  //library code here

}

我能够删除所有垫片:

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    jquery: 'jquery-1.11.1.min',
    responsiveIframe: 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

...并像这样调用:

require(['jquery','responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({xdomain: '*'});
});

但是，我始终热衷于以“正确”的方式做事，而修改库却会让我感到不舒服。

我觉得我应该能够使用 shim 来正确应用此包装代码...

Answer 1

您尝试的最后一个垫片很接近，但 deps 的值应该是数组而不是字符串。尝试:

shim: {
    'responsiveIframe': {
        deps: ['jquery']
    }
}

这是确保在加载并运行responseIframe 脚本之前加载jquery。