使用require.js实现jQuery的正确方法 [英] Correct way to implement jQuery with require.js

问题描述

我正在使用require.js和jQuery的当前稳定版本，我目前包括这样的jQuery

I am using the current stable release of both require.js and jQuery and I am currently including jQuery like this

requirejs.config({
paths: {
    'jQuery': 'vendor/jquery',
}
});

require(['jQuery'], function(jQuery) {
    log(jQuery); // working
});

我没有得到的是我真的不需要明确地回馈jQuery，因为这仍然有效（也在其他模块中）：

What I don't get is that I don't really need to explicitly give back jQuery, as this will still work (also in other modules):

require(['jQuery'], function( // nothing here ) {
    log(jQuery); // working
});

现在我不确定这是否是正确的做法，也因为使用$美元符号参考jQuery不起作用！

Now I'm not sure if this is the correct way of doing it, also because using the $ dollar sign for reference to jQuery doesn't work!

推荐答案

我看到的关键点：

1. jQuery与RequireJS一起使用时将自身注册为命名模块'jquery'（全部小写）。在你的例子中，你试图将它用作'jQuery'，这会使事情有点混淆，因为这也是它在加载时注册的全局函数的名称（参见第2点）。


2. 默认情况下，jQuery使用全局函数$和jQuery注册自己，即使与AMD / RequireJS一起使用也是如此。如果要关闭此行为，则必须调用noConflict函数。



3. 您可以在noConflict调用中将RequireJS引用包装到jQuery，如下例所示。据我所知，当你没有其他需要全局$或jQuery的模块时，这是推荐的方法：

1. jQuery when used with RequireJS registers itself as named module 'jquery' (all lower case). In your example you are trying to use it as 'jQuery', which confuses things a bit since this is also the name of a global function that it registers when loaded (see point #2).
2. By default, jQuery registers itself using the global functions "$" and "jQuery", even when used with AMD/RequireJS. If you want to turn off this behavior you have to call noConflict function.

3. You can wrap your RequireJS reference to jQuery in a noConflict call, as shown in the example below. As far as I can tell, this is the recommended approach when you don't have other modules which need the global $ or jQuery:

requirejs.config({
    paths: {
        'jquery': 'vendor/jquery',
    }
});

define('jquery-private', ['jquery'], function (jq) {
    return jq.noConflict( true );
});

require(['jquery-private'], function(jq) {
    console.log(jq);      // working
    console.log($);       // undefined
    console.log(jQuery);  // undefined
});

另见我在这个问题中回答关于如何映射其他模块以使用私有（noConflict） ）版本。

See also my answer in this question regarding how to map other modules to use the private (noConflict) version.

有关更多背景信息，请参阅jQuery源代码中的这些行，这些是我上面描述的所有内容的原因：

For more background, see these lines from the jQuery source code which are the cause of everything I described above:

    // Expose jQuery to the global object
    window.jQuery = window.$ = jQuery;

    // Expose jQuery as an AMD module, but only for AMD loaders that
    // understand the issues with loading multiple versions of jQuery
    // in a page that all might call define(). The loader will indicate
    // they have special allowances for multiple jQuery versions by
    // specifying define.amd.jQuery = true. Register as a named module,
    // since jQuery can be concatenated with other files that may use define,
    // but not use a proper concatenation script that understands anonymous
    // AMD modules. A named AMD is safest and most robust way to register.
    // Lowercase jquery is used because AMD module names are derived from
    // file names, and jQuery is normally delivered in a lowercase file name.
    // Do this after creating the global so that if an AMD module wants to call
    // noConflict to hide this version of jQuery, it will work.
    if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
        define( "jquery", [], function () { return jQuery; } );
    }

更新： 使用RequireJS网站的jQuery部分已更新，以反映上述信息。另请参阅此答案，了解相关步骤-step包括优化器。只是想再次强调一下，这种noConflict方法只有在所有你的插件与AMD兼容时才有效。

UPDATE: the Use with jQuery section of the RequireJS site has been updated to reflect the above info. See also this answer for step-by-step including optimizer. Just want to emphasize again that this noConflict approach only works if all your plugins are AMD compatible.

这篇关于使用require.js实现jQuery的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！