介绍§ 1

尽管RequireJS像其他依赖项一样加载jQuery,但jQuery的广泛使用和广泛的插件生态系统意味着您可能在项目中拥有也依赖jQuery的其他脚本。您可能会以不同的方式来处理jQuery RequireJS配置,具体取决于您是开始一个新项目还是正在改编现有代码。

全局函数§ 2

jQuery将自己注册为全局变量"$"和"jQuery",即使它检测到AMD/RequireJS。AMD方法建议不要使用全局函数,但是关闭这些jQuery全局变量的决定取决于您是否拥有依赖于它们的非AMD代码。jQuery具有一个noConflict函数,该函数支持释放对全局变量的控制,并且可以在您的requirejs.config中将其自动化,这将在后面介绍

模块名称§ 3

jQuery 在检测到AMD/RequireJS时定义了命名为AMD的模块 "jquery"(全部小写)。为了减少混乱,我们建议在您的requirejs.config中使用"jquery"作为模块名称。

例子:

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        // 左边是模块ID,右边是jQuery文件,相对于baseUrl。
        // 此外,路径不应包括.js文件扩展名。
	// 这个例子正在使用位于js/lib/jquery-1.9.0.js,相对于HTML页面.
        jquery: 'jquery-1.9.0'
    }
});

另一个(推荐)解决方案是仅将文件命名为"jquery.js"并将其放置在baseUrl目录中。然后,不需要上述路径条目。

通过根据默认的ID到路径约定放置文件,可以避免很多配置行 baseUrl + moduleID + '.js'。以下示例显示了如何将baseUrl设置为第三方库代码的目录,以及如何为您的应用程序代码使用一个额外的路径配置。

因此,重申一下,如果使用其他模块名称(如)引用jQuery,则可能会出现错误'lib/jquery'这个例子不起作用:


    // 这样不行
    define(['lib/jquery'], function ($) {...});

由于jQuery使用'jquery'而不是'lib/jquery'的名称进行注册,因此无法使用。通常,不建议在define()调用中显式命名模块,但是jQuery有一些特殊的约束。

使用shim config的示例§ 4

此示例显示如何使用shim config为不调用define()的 jQuery插件指定依赖项。如果您有一个现有的jQuery项目要转换并且不想修改jQuery插件的源以调用define(),则此示例很有用。

使用shim config的jQuery示例

从CDN加载jQuery的示例§ 5

本示例说明了如何从Content Delivery Network(CDN)加载jQuery时加载和优化代码。这个例子要求您所有的jQuery插件都调用define()来正确表达它们的依赖关系。使用CDN资源进行优化构建后,shim config不起作用。

从CDN使用jQuery的示例

映射模块以使用noConflict§ 6

如果您所有模块(包括依赖jQuery的任何第三方jQuery插件或库代码)都与AMD兼容,并且您希望避免在调用它们时在全局命名空间中使用$或jQuery,则requirejs(['jquery'])可以使用map config映射使用将jQuery转换为一个调用noConflict的模块,并返回jQuery的值作为'jquery'模块ID。

您可以将此示例与上面的CDN示例一起使用-shim示例将不起作用,因为填充的库需要全局jQuery。

requirejs.config({
    // 除了任何baseUrl或项目中可能已经有了路径配置。
    map: {
      // '*' 意味着所有模块都将获得"jquery private"他们的“jquery"依赖关系
      '*': { 'jquery': 'jquery-private' },
      // “jquery-private"需要真正的jquery模块不过。如果这条线不在这里
      // 是一个无法解决的循环依赖。
      'jquery-private': { 'jquery': 'jquery' }
    }
});

// 以及“jquery private"模块,在jquery-private.js文件
define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

这意味着任何使用jQuery的模块都将需要使用AMD返回值,而不是依赖于全局$:


requirejs(['jquery'], function( $ ) {
    console.log( $ ) // OK
});

requirejs(['jquery'], function( jq ) {
    console.log( jq ) // OK
});

requirejs(['jquery'], function( ) {
    console.log( $ ) // 未定义!
});

前面的示例带有串联的require-jquery文件§ 7

以前,我们一直在使用一个特殊的require-jquery文件指向一个示例,该文件由require.js和jQuery串联而成。这不再是将jQuery与require.js一起使用的推荐方法,但是如果您正在寻找(不再维护)示例,则可以在此处找到require-jquery