如何使用require.js加载带有noConflict的jQuery

时间:2013-04-09 12:20:31

标签: javascript jquery requirejs

我正在尝试使用require

在noConflict模式下加载jquery
require.config({
    paths: {
        'jquery': 'libs/jquery-req',
        underscore: 'libs/underscore',
        backbone: 'libs/backbone'
    },
    shim: {
        jquery: {
            init: function() {
                console.log('jq init');
                var jq = this.jQuery.noConflict(true);
                jq.support.cors = true;

                return jq;
            },
            exports: '$'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            init: function() {
                console.log('b init');
            },
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        }
    }
});

并使用它:

define([
    'jquery',
    'underscore',
    'backbone'
], function(jq, _, Backbone) {
    console.log(jq);
    var initialize = function() {
//        Router.initialize();
    };

    return {
        initialize: initialize
    };
});

不幸的是,似乎shim.jquery.init函数从未被调用过。有人可以帮我理解为什么吗?重命名jquery时有什么奇怪的 - > jquery-reg然后它似乎工作,但它需要更改每个文件中定义的依赖项。

2 个答案:

答案 0 :(得分:24)

创建以下noconflict.js模块:

define(["jquery"], function($) {
  //drop the `true` if you want jQuery (but not $) to remain global
  return $.noConflict(true); 
});

然后,在您的require.config中添加:

map: {
  "*": {
    "jquery": "noconflict"
  },
  "noconflict": {
    "jquery": "jquery"
  }
}

jQuery的noconflict版本将交给所有模块(noconflict除外)。摆脱jQuery垫片。

请注意,将jQuery保留在全局命名空间之外的路径将阻止您使用任何非AMD的jQuery插件,而无需将这些插件修改为AMD模块。 Shim没有做任何神奇的事情来利用这个设置。对于你可能想要填充的任何非AMD模块都是一样的,这取决于你做出的“纯粹”AMD。

答案 1 :(得分:0)

我正在使用这个:

require.config({
    paths: {
        jquery: 'libraries/jquery/jquery.min',
        underscore: 'libraries/underscore.min',
        backbone: 'libraries/backbone.min',
        jquery_ui: 'libraries/jquery/jquery.ui.min',
    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'jquery_ui': {
            deps: ['underscore', 'jquery'],
            exports: 'ui'
        }
    }
});

然后在我的应用程序中,我使用本地范围来定义jquery的实例。在下面的例子中,$是jquery,但它也可以是其他东西。

define([
    'jquery', 
    'backbone'
    ], function ($, Backbone) {

    'use strict';

    var app = Backbone.View.extend({
        el: 'body',

        initialize: function() { },

    });

    return app;

});