使用requireJS与jquery相关库(responsiveIframe)

Using requireJS with jquery-dependant library (responsiveIframe)

本文关键字：responsiveIframe requireJS jquery 使用      更新时间：2023-09-26

我在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) {

似乎工作…但这看起来很"俗气"。

编辑# 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来正确应用这个换行代码

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

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

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

你应该这样设置shim:

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        exports: '$'
    }
}

然后把你的模块定义改成

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

应该可以了

乌利希期刊指南。

如果exports返回不同的jquery，那么你应该这样修改shim:

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        init: function(jquery) {
            return jquery;
        }
    }
}
相关文章：
  • 没有找到相关文章