如何将 jquery ui 与 requirejs 一起使用答案

【问题标题】：How do I use jquery ui with requirejs如何将 jquery ui 与 requirejs 一起使用
【发布时间】：2016-07-04 15:42:15
【问题描述】：

我想在我的应用程序中使用 jQuery UI 的 addClass 函数。

除此之外，我使用的是普通的 jQuery，下划线，主干都与 requirejs 一起分层。

我已经像这样配置了 jQuery UI：

require.config({

    deps: ["main"],

    paths: {
        "text": "lib/text"
        , "jquery": "lib/jquery"
        , "jquery-ui": "lib/jquery-ui"
        , "underscore": "lib/underscore"
        , "backbone": "lib/backbone"
        , "bootstrap": "lib/bootstrap"
        , "templates": "../templates"
    },

    shim: {
        "jquery-ui": {
            exports: "$",
            deps: ['jquery']
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            exports: "Backbone",
            deps: ["underscore", "jquery"]
        },
        "bootstrap": ['jquery']
    }

});

在我做的应用程序中：

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
    $('div').addClass('white');
});

不幸的是，这只是普通的addClass，而不是来自 jQuery UI 的动画。

PS：我使用的是完整的 jQuery 版本。

【问题讨论】：

off-subject: white 是一个非常糟糕的类名；类名不应包含分配给它的 css，以便您可以更改底层 CSS 而不会影响类的语义值。
可能重复：stackoverflow.com/questions/10237384/…

标签： javascript jquery-ui requirejs

【解决方案1】：

你需要包含jquery-ui：

define(['jquery-ui', 'backbone'], function() {
    $('div').addClass('white');
});

jquery 应该是自动需要的，因为它是 jquery-ui 的依赖项

此外，这些脚本都不返回任何内容，但它们的变量被分配给窗口对象。无需分配它们。

【讨论】：

不需要列出下划线吗？因为它已经被列为骨干网的依赖项？
IDK 如果 jquery-ui 将正确地将自己添加到 $ 如果 jQuery 没有被分配到 $ 在闭包中
不，实际上它们根本不需要分配。他们将自己分配给窗口对象（window.$、window._、window.Backbone）。 Require 通过传入包含文件的返回值来工作，这些库不返回任何内容，而是设置它们的全局引用。
如果需要不同的版本，打开兼容性，或者使用多个$库怎么办？
无论如何，这不是 require 与这些库一起工作的方式。如果将其保留为函数，则传入的值将为 null，因为脚本不返回任何内容，但会执行全局操作。

【解决方案2】：

试试

define(['jquery', 'jquery-ui', 'underscore', 'backbone'], function($, ui, _, Backbone) {
    // $.ui should be defined, but do
    // $.ui = ui if its not
    $('div').addClass('white');
});

【讨论】：

不需要jquery，其他的都已经把它列为依赖了。
我以前从未使用过requirejs，所以我只是在黑暗中拍摄，但我担心$ 被定义为jquery-ui 以将其自身添加到闭包内的$.ui。

【解决方案3】：

有时您只需要一小部分 jQuery UI。例如，我最近需要可排序的，但如果我尝试加载整个内容，那么我会在 jquery-ui 上的 $.button() 和引导程序中的 $.button() 之间发生冲突。 jQuery UI 现在支持 AMD，所以我使用 RequireJS 的构建工具 r.js 来构建我需要的子集。

【讨论】：