require.js 依赖Jquery

最新推荐文章于 2024-06-12 09:45:34 发布

boonya

最新推荐文章于 2024-06-12 09:45:34 发布

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： requirejs jquery

原文链接：https://requirejs.org/docs/jquery.html

版权

JavaScript 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

介绍

虽然RequireJS像任何其他依赖项一样加载jQuery，但jQuery的广泛使用和广泛的插件生态系统意味着您可能在项目中还有其他依赖于jQuery的脚本。您可能会以不同方式处理jQuery RequireJS配置，具体取决于您是要启动新项目还是调整现有代码。

全局函数

jQuery将自身注册为全局变量“$”和“jQuery”，即使它检测到AMD / RequireJS。 AMD方法建议不要使用全局函数，但是关闭这些jQuery全局变量的决定取决于你是否拥有依赖于它们的非AMD代码。 jQuery有一个noConflict函数，支持释放对全局变量的控制，这可以在requirejs.config中自动完成，我们稍后会看到。

模块名称

jQuery在检测到AMD / RequireJS时定义了命名的AMD模块'jquery'（全部小写）。为了减少混淆，我们建议在requirejs.config中使用'jquery'作为模块名称。例：

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        // the left side is the module ID,
        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        jquery: 'jquery-1.9.0'
    }
});

他的其他（推荐）解决方案是将文件命名为'jquery.js'并将其放在baseUrl目录中。然后不需要上面的路径条目。

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

所以重申一下，如果你用另一个模块名称引用jQuery，比如'lib / jquery'，你可能会收到错误。 这个例子不起作用：


    // THIS WILL NOT WORK
    define(['lib/jquery'], function ($) {...});

它不起作用，因为jQuery使用'jquery'而不是'lib / jquery'的名称注册自己。通常，不鼓励在define（）调用中显式命名模块，但jQuery有一些特殊的约束。

使用shim config的示例

此示例显示如何使用shim配置为不调用define（）的jQuery插件指定依赖项。如果您想要转换现有的jQuery项目并且不想修改jQuery插件的源以调用define（），那么此示例很有用。

Example using jQuery with shim config

从CDN加载jquery的示例

此示例显示如何在从Content Delivery Network（CDN）加载jQuery时加载和优化代码。此示例要求所有jQuery插件调用define（）以正确表达其依赖项。使用CDN资源进行优化构建后，Shim config不起作用。

Example using jQuery from a CDN

映射模块以使用noConflict

如果所有模块（包括依赖于jQuery的任何第三方jQuery插件或库代码）都是AMD兼容的，并且你想要在调用requirejs（['jquery']）时避免在全局命名空间中使用$或jQuery，那么你可以使用map config将jQuery的使用映射到一个调用noConflict的模块，并为'jquery'模块ID返回jQuery的值。

您可以将此示例与上面的CDN示例一起使用 - 由于shimmed库需要全局jQuery，因此shim示例将无法工作。

requirejs.config({
    // Add this map config in addition to any baseUrl or
    // paths config you may already have in the project.
    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' }
    }
});

// and the 'jquery-private' module, in the
// jquery-private.js file:
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( $ ) // UNDEFINED!
});