javascript - RequireJS:加载库模块后自动加载配置脚本

Question

我正在重构项目的 JavaScript，以使用 RequireJS 按需加载所需模块，而不是向 HTML 模板添加一堆脚本标签。

我们使用一些库，例如 jQuery、jQuery 的 DataTables 插件等，其中一些库在加载后需要进行一些初始化。 IE。数据表的默认设置必须在加载库之后和第一次使用之前设置。

目前，我在主脚本中执行此操作，该脚本在 RequireJS 之后立即加载。该主模块需要所有需要初始化的库(例如DataTables)，并设置默认设置

require(["jquery", "datatables"], function($) {
    // Set datatables default values
    $.extend(
        $.fn.dataTable.defaults,
        {
            jQueryUI: true,
            lengthMenu: [5, 10, 25, 50],
            paginationType: "full_numbers",
            pageLength: 5
        }
    );
});

这种方法非常烦人，原因有两个:

1. 我宁愿为每个库都有一个配置文件，这样我就不必在可能巨大的主脚本中乱搞来更改设置
2. 主脚本始终加载每个库以初始化其设置，即使某些库可能未在当前页面上使用

为了改进这一点，我正在寻找某种“加载后”依赖项或回调，它会在加载库时自动加载或执行。

我考虑过对这些库使用 shim 配置的 init 回调，但由于我的库不会污染全局命名空间，并且只有依赖项被传递给 init 函数，所以我没有机会访问加载的模块在 init 内部(据我所知)。

然后我想到修改 RequireJS 的 map 配置来映射 i。 e. DataTables 到一个包装器脚本，它需要实际的DataTables 库并随后设置配置选项。

是否有更直接的方法来加载配置？

Answer 1

只是想让你知道我的最终解决方案。我屈服于使用包装脚本和 map 配置。

RequireJs配置的相关部分:

// Configure the RequireJS library
var require = {
    baseUrl: "js/modules",
    paths: {
        "jquery":     "../lib/jquery/dist/jquery",
        "datatables": "../lib/DataTables/media/js/jquery.dataTables",
    },
    map: {
        // Map the 'datatables' library to its wrapper module 
        // for every other module that 'require's this library
        '*': {
            'datatables': 'application/datatables.wrapper'
        },
        // only the wrapper script is supposed to get the actual 
        // 'datatables' library when 'require'ing 'datatables'
        'application/datatables.wrapper': {
            'datatables': 'datatables'
        },
    }
};

我的包装器脚本如下所示(文件“js/modules/application/datatables.wrapper.js”)

define(
    // require jQuery, DataTables, and the DataTables configuration object
    // which resides in another file
    ["jquery", "datatables", "application/config/datatables.config"], 
    function($, dataTable, config) {
        // Set datatables default values
        $.extend(
            dataTable.defaults,
            config
        );

        return dataTable;
    }
);

与映射一样奇怪

'datatables': 'datatables' 

看起来，它的作用就像一个魅力!