jquery - 使用 requirejs 中的插件停止全局 jquery

Question

我有 jquery 和 jquery-cookie 在下面正确地协同工作。我想使 jquery 不是全局的。现在确实如此。我尝试过的任何方法似乎都会破坏 jquery-cookie。

require.config({
    paths: {
        "jquery": '../components/jquery/jquery',
        "jquery-cookie": "../components/jquery-cookie/jquery.cookie",
    },
    shim: {
        "jquery-cookie": {
            deps: ['jquery']
        }
    }
});

require(["jquery", "jquery-cookie"], function($) {
    console.log($().jquery); // 1.7.2
    console.log($.cookie("hello")); // null
});

以下更改将使 jquery 本地化并破坏 cookie:

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

require(["nc-jquery", "jquery-cookie"], function($) {
    console.log($().jquery);
    console.log($.cookie("hello"));
});

Answer 1

jquery 和 jquery-cookie 均兼容 AMD，因此无需进行任何 shim 配置。只要您定义了一个名为“jquery”的路径(您确实这样做了)，jquery-cookie 模块就会需要它并加载依赖项，而无需全局 $.请参阅 jquery-cookie source code 中的这一行它在其中查找名为“jquery”的模块:

if (typeof define === 'function' && define.amd) {
    // AMD. Register as anonymous module.
    define(['jquery'], factory);

正如您在原始示例中所示，您可以将 jQuery 包装为 nc-query 以消除全局 $.您可能需要做的另一件事是为您想要自动使用它的任何库创建一个“映射”条目。

那么您的示例的修改版本将如下所示:

require.config({
    paths: {
        'jquery': '../components/jquery/jquery',
        'jquery-cookie': '../components/jquery-cookie/jquery.cookie'
    },
    map: {
        'jquery-cookie': { 'jquery': 'nc-jquery' }
    }
});

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

require(['nc-jquery', 'jquery-cookie'], function(myNonGlobaljQuery) {
    console.log(myNonGlobaljQuery().jquery);
    console.log(myNonGlobaljQuery.cookie("hello"));
});

这意味着当 jquery-cookie 请求“jquery”时，您可以给它“nc-jquery”。您可以根据需要为您想要以这种方式工作的任何库创建任意数量的这些。请参阅API docs for map .