Question

我有一个jQuery / Require.js / Backbone项目，它加载了jQuery Datatables库及其几个插件。下面的配置工作正常，但它似乎有点粗糙。

是否有更优雅的方式来加载所有这些依赖于数据集的插件？

如果“deps”shim属性的反转会在加载给定库后加载子插件，那将会很酷。

另外，在下面的配置中，我将所有外部依赖项加载到App范围中，因为它们实际上被我的应用程序中的每个Backbone视图使用，我不想在每个模块中定义/包含它们。

在App范围中加载所有外部库而不是将它们包含在每个View中都是愚蠢的吗？

我非常感谢这里的最佳实践指导。我已经在这个网站上阅读了很多相关的主题，并且在人们加载很多这样的依赖关系的例子中找不到太多。

require.config({
    baseUrl: 'js/com/mycompany/',
    paths: {
        jquery: '/js/lib/jquery',
        underscore: '/js/lib/underscore/underscore',
        backbone: '/js/lib/backbone/backbone',
        text: '/js/lib/require/text',

        jqueryui: '/js/lib/ui/jquery-ui-1.10.0.custom.min',
        json: '/js/lib/json/jquery.json-2.3.min',
        datatables: '/js/lib/datatables/js/jquery.dataTables.min',
        datatablesSelectable: '/js/lib/datatables/js/datatables.Selectable',
        datatablesToggle: '/js/lib/datatables/js/jquery.groupToggle',
        datatablesResize: '/js/lib/datatables/js/ColReorderWithResize',
        datatablesTableTools: '/js/lib/datatables/tabletools/js/TableTools.min',
        toaster: '/js/lib/toaster/javascript/jquery.toastmessage',
        cookie: '/js/lib/cookie/jquery.cookie',
        validation: '/js/lib/validation/jquery.validate',
        validationAdditional: '/js/lib/validation/additional-methods',
        alerts: '/js/lib/alerts/jquery.alerts',
        loadmask: '/js/lib/loadmask/jquery.loadmask.min',
        qtip: '/js/lib/qtip/jquery.qtip.min',
        dropdown: '/js/lib/dropdown/jquery.dropdown',

        extensions: '/js/com/mycompany/common/extensions',
        app: 'app'
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        jqueryui: { deps: ["jquery"] },

        datatables: { deps: ["jquery"] },
        datatablesSelectable: { deps: ["datatables"] },
        datatablesToggle: { deps: ["datatables"] },
        datatablesResize: { deps: ["datatables"] },
        datatablesTableTools: { deps: ["datatables"] },

        toaster: { deps: ["jquery"] },
        cookie: { deps: ["jquery"] },
        validation: { deps: ["jquery"] },
        validationAdditional: { deps: ["validation"] },
        alerts: { deps: ["jquery"] },
        loadmask: { deps: ["jquery"] },
        qtip: { deps: ["jquery"] },
        dropdown: { deps: ["jquery"] },
        json: { deps: ["jquery"] },

        extensions: { deps: ["jquery", "datatables"] }
    }
});

require([

    'app',
    'extensions',

    'backbone',
    'jqueryui',
    'datatables',
    'datatablesSelectable',
    'datatablesToggle',
    'datatablesResize',
    'datatablesTableTools',
    'toaster',
    'validation',
    'validationAdditional',
    'alerts',
    'loadmask',
    'qtip',
    'json'

], function(
    App,
    extensions,

    // including all these here because they are used by literally
    // every view in the app. seems kinda gross
    Backbone,
    jqueryui,
    datatables,
    datatablesSelectable,
    datatablesToggle,
    datatablesResize,
    datatablesTableTools,
    toaster,
    validation,
    validationAdditional,
    alerts,
    loadmask,
    qtip,
    json

    ){

    App.initialize();

});

路径配置可能看起来有点奇怪，因为我在网络服务器的根“/”上下文中有一个基本应用程序（所有常见的外部Javascript库都位于其中）。此应用程序存在于子上下文（例如“/ myapp”）中，该子上下文具有自己的自定义脚本的本地js目录。

感谢您的任何意见！

Answer 1

由于所有的插件都是“普通JS”文件，为什么不连接+将所有插件缩小为一个文件？将其命名为“myjqplugins.js”并在paths中只有一个条目，在shims中只有一个条目

或者，至少将它们连成团结：验证+验证附加烤面包机+ qtip +其他数据表***作为一个文件。

^ 3 paths个条目+ 3个shims条目。

如何使用Require.js配置库插件？

1 个答案: