Question

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

我们使用一些库，比如jQuery，jQuery等的DataTables插件等，其中一些库在加载后需要进行一些初始化。 I. e。必须在加载lib之后和第一次使用lib之前设置DataTables的默认设置。

目前我在一个主要脚本中执行此操作，该脚本在RequireJS之后立即加载。这个主模块require是所有需要初始化的库，比如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
        }
    );
});

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

我宁愿为每个lib都有一个配置文件，所以我不必在可能很大的主脚本中乱用来更改设置
主脚本总是加载每个lib来初始化其设置，即使某些库可能不在当前页面上使用

为了改善这一点，我正在寻找某种＆＃34;后载＆＃34;依赖或回调，在加载库时自动加载或执行。

我考虑过对这些库使用shim配置的init回调，但由于我的库没有污染全局命名空间，只有依赖关系被传递给init函数，我没有机会访问在init中加载模块（据我所见）。

然后我考虑修补RequireJS的地图配置来映射i。即DataTables到包装器脚本，require是实际的DataTables lib，然后设置配置选项。

是否有更简单的加载配置的方法？

Answer 1

只是想让你知道我的最终解决方案。我决定使用包装器脚本和地图配置。

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'
        },
    }
};

我的包装器脚本如下所示（文件＆＃34; js / modules / application / datatables.wrapper.js＆＃34;）

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'

可能看起来，它的工作就像一个魅力！

RequireJS：加载库模块后自动加载配置脚本

1 个答案: