2

我有一个 jQuery / Require.js / Backbone 项目，它加载 jQuery Datatables 库及其几个插件。下面的配置工作正常，但看起来有点恶心。

有没有更优雅的方式来加载所有依赖于 Datatables 的插件？

如果加载给定库后加载子插件的“deps” shim 属性的倒数会很酷。

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

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

我将非常感谢这里提供的任何最佳实践指导。我已经阅读了该站点上的很多相关主题，但在人们加载大量这样的依赖项的示例方式中找不到太多。

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 目录。

感谢您的任何意见！

4

1 回答 1

1

既然所有插件都是“普通 JS”文件，为什么不将所有插件连接 + 缩小到一个文件中呢？称它为“myjqplugins.js”并且只有一个条目paths和一个条目shims

或者，至少将它们连接到有凝聚力的组中：validation + validationAdditional Toaster + qtip + others Datatables*** 作为一个文件。

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

于 2013-02-13T05:31:35.207 回答