jQuery noconflict,bootstrap和requirejs

尤金

我正在开发的环境正在使用jQuery 1.7.1,而我需要专门使用jQuery 2.1.3。但是当我确实使用2.1.3时,一些遗留代码中断(如使用1.7.1一样),因此我不得不在2.1.3上使用jQuery.noconflict

jquery-private.js:

define(["jquery"], function(jQuery){
    return jQuery.noConflict(true);
});

所以在我的requirejs配置文件中,我有这个:

config.js:

requirejs.config({
    baseUrl: '../',
    paths: {
        'jquery': 'js/jquery/jquery',
        'jqueryui': 'js/jquery-ui/jquery-ui',
        'bootstrap': 'js/bootstrap',
    },
    map: {
        // '*' means all modules will get 'jquery-private'
        // for their 'jquery' dependency.
        '*': {
            'jquery': 'jquery-private'
        },

        // 'jquery-private' wants the real jQuery module
        // though. If this line was not here, there would
        // be an unresolvable cyclic dependency.
        'jquery-private': {
            'jquery': 'jquery'
        }
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        }
    }
});

所以当我需要引导时

widget.js:

require([
    "jquery",
    "bootstrap"
], function(jqr){
    // SOME CODE
});

我收到一个错误:

未捕获的错误:Bootstrap的JavaScript需要jQuery 1.9.1或更高版本

因此,引导程序将启动1.7.1。

在不更改bootstrap.js文件的情况下,如何使它拾取2.1.3?

路易

为什么会失败?

您当前的尝试无法正常进行,因为您的jquery-private设置确保将jQuery作为RequireJS模块加载后立即noConflict()进行调用。只要RequireJS加载的代码通过define调用(例如define(['jquery'], function ($) {引用jQuery ,就没有问题。但是,填充的任何代码都将引用$jQuery全局变量,因此将引用版本1.7.1。

一个办法

在没有任何其他约束的情况下,首选解决方案是使整个代码库使用相同的jQuery版本。将1.7.1升级到1.x系列中的最新版本,然后使用它。根据下载页面,2.x与1.x系列中相对较新的版本(我会说1.9.x及更高版本)之间没有API差异。当然,这意味着依赖于1.7.1的代码可能必须进行更新才能与1.x系列中的最新jQuery一起使用。

我本来建议升级到2.x系列,但是您在注释中提到需要与IE 6和7兼容。请注意:如果您确实设法为同一页面加载了1.7.1和2.1.3,则该部分使用2.1.3的代码将与IE 6和7不兼容,因此该页面实际上不再与IE 6和7兼容。

要使用此解决方案,除了必须进行的升级更改外,还必须:

  1. 确保jQueryRequireJS之前加载否则,它将检测RequireJS并进行调用,define但随后将无法可靠地将其用于未随RequireJS一起加载的代码。(我说它不会“可靠地可用”,因为尽管一旦jquery模块被加载,则jQueryand$全局变量将存在,问题在于未与RequireJS一起加载的代码无法等待RequireJS加载jQuery。因此,除非您努力编写自己的同步代码,它将无法可靠地运行。)

  2. 创建一个RequireJS模块,该模块仅使jQuery可以在RequireJS可用之前作为模块来加载jQuery,因此:

    define('jquery', function () { return jQuery; });
    

    可以将其放置在您致电之前require.config这将创建一个“假”jquery模块,该模块仅返回全局jQuery符号。(它也可以返回$。)

备择方案?

我看不到上述解决方案可靠替代方案。提出可以证明另一种方法的概念证明并不难。但是,一旦您尝试在实际项目中使用它,它就会失败。问题在于RequireJS本质上是异步的,因此您无法开始与$andjQuery全局变量打交道以将其设置为所需的方式,并确保您想要发生的一切都会在您希望发生的时刻发生此外,任何在RequireJS之前加载的代码可能会启动异步操作,而这些操作可能与RequireJS的模块加载交错发生,这会给整个操作带来麻烦。我宁愿不要提出一旦从概念验证到实际应用就会失败的解决方案。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在处理开始时使用jQuery和RequireJS

来自分类Dev

有没有办法将Bootstrap 3.0插件与jQuery.noConflict()一起使用?

来自分类Dev

jQuery和Bootstrap之间的冲突

来自分类Dev

jquery noConflict jquery.mobile

来自分类Dev

无法使用Bower,Jquery UI和RequireJS查找Jquery UI依赖项

来自分类Dev

使用requireJS和jQuery插件

来自分类Dev

如何使用jQuery,RequireJS和KnockoutJS创建基本的TypeScript项目

来自分类Dev

如何维护noConflict并在Bootstrap 3.2中包含jQuery的2个版本

来自分类Dev

Using isotope with requirejs and jquery

来自分类Dev

Drupal,Bootstrap和Jquery冲突?

来自分类Dev

Javascript(JQuery)和Bootstrap模式

来自分类Dev

jQuery和Bootstrap轮播

来自分类Dev

BootStrap DatePicker NoConflict

来自分类Dev

jQuery Mobile弹出窗口未使用requireJS和bonesJS触发

来自分类Dev

使用requireJS和jQuery的Click事件

来自分类Dev

jQuery noconflict问题

来自分类Dev

使用RequireJS设置jQuery noConflict

来自分类Dev

如何维护noConflict并在Bootstrap 3.2中包含jQuery的2个版本

来自分类Dev

jQuery noConflict问题1.7.0和1.10.2

来自分类Dev

与jQuery.noConflict()冲突

来自分类Dev

RequireJS JQuery ContextMenu问题

来自分类Dev

jQuery noConflict,还是什么?

来自分类Dev

在RequireJS中加载订单jQuery UI和Oracle MapViewer

来自分类Dev

具有noConflict和noConflict变量赋值的jQuery

来自分类Dev

使用noConflict初始化jQuery插件

来自分类Dev

jQuery和Bootstrap输入验证

来自分类Dev

Bootstrap崩溃和jQuery事件

来自分类Dev

jQuery处理函数+ requireJs

来自分类Dev

jQuery UI 选项卡和 RequireJS