有人用过 RequireJS 吗？

RequireJS 用网络术语来说，现在已经成为一种老技术了（有些人可能说它很古老），但至今仍被广泛使用，最近围绕 RequireJS 和 DataTables 出现了一些问题。我长期以来想做的一件事是创建一个单一定义文件，该文件可用于加载任何 DataTables 扩展，无论你使用哪种样式库。所以最后，是时候掸去 AMD 加载器的技能，把它做完了！

加载器脚本

我在下载部分创建了一个 RequireJS 页面，详细说明如何将 DataTables 及其扩展与 RequireJS 结合使用，并提供了一个脚本，该脚本会构建一个 RequireJS 配置，以便从我们的 CDN 加载 DataTables——如下所示

(function(){

var cdnBase = 'https://cdn.datatables.net';
var extensions = [
    {n: 'autofill', v: '2.7.0'},
    {n: 'buttons', v: '3.1.2'},
    {n: 'fixedcolumns', v: '5.0.3'},
    {n: 'fixedheader', v: '4.0.1'},
    {n: 'keytable', v: '2.12.1'},
    {n: 'responsive', v: '3.0.3'},
    {n: 'rowgroup', v: '1.5.0'},
    {n: 'rowreorder', v: '1.5.0'},
    {n: 'scroller', v: '2.4.3'},
    {n: 'searchbuilder', v: '1.8.1'},
    {n: 'searchpanes', v: '2.3.3'},
    {n: 'select', v: '2.1.0'},
    {n: 'staterestore', v: '1.4.1'}
];

var styles = [
    {s: 'bm', f: 'bulma'},
    {s: 'bs', f: 'bootstrap'},
    {s: 'bs4', f: 'bootstrap4'},
    {s: 'bs5', f: 'bootstrap5'},
    {s: 'dt', f: 'dataTables'},
    {s: 'ju', f: 'jqueryui'},
    {s: 'se', f: 'semanticui'}
];

// Initial paths which aren't included in the automatic path setup
var paths = {
    'datatables.net': cdnBase + '/2.1.8/js/jquery.dataTables.min',
    'datatables.net-buttons-print': cdnBase + '/buttons/3.1.2/js/buttons.print.min',
    'datatables.net-buttons-html5': cdnBase + '/buttons/3.1.2/js/buttons.html5.min',
    'datatables.net-buttons-colvis': cdnBase + '/buttons/3.1.2/js/buttons.colVis.min',
    'jquery': 'https://code.jquery.com/jquery-3.6.0.min'
};

for (var i=0 ; i<styles.length ; i++) {
    paths['datatables.net-' + styles[i].s] =
        cdnBase + '/2.1.8/js/dataTables.' + styles[i].f + '.min';
}

for (var i=0 ; i<extensions.length ; i++) {
    var e = extensions[i];

    paths['datatables.net-' + e.n] =
        cdnBase + '/' + e.n + '/' + e.v + '/js/dataTables.' + e.n + '.min';

    for (var j=0 ; j<styles.length ; j++) {
        var s = styles[j];

        paths['datatables.net-' + e.n + '-' + s.s] = cdnBase + '/' + e.n + '/' + e.v + '/js/' + e.n + '.' + s.f + '.min';
    }
}

require.config({
    paths: paths
});

})();

当然，我本可以列出所有文件和路径，但编写脚本更紧凑、更容易维护，而且说真的，更有意思！

太棒了——让我们用用看

使用方法非常简单——加载 RequireJS，如果你以前用过它，你就会习惯，包括上面的脚本，然后使用我们 NPM 命名约定require 所需的模块

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
// .. Script from above

require(
    ['jquery', 'datatables.net'],
    function ($) {
        $('#myTable').DataTable();
    }
)
</script>

这个运行的示例可在此处查看。

给 AMD 一些爱

虽然完全接受 AMD 加载现在是一种传统技术，但我希望它会对你们有些人有用。如果是这样，请告诉我——我会考虑将它放到 NPM 和我们的 CDN 上（版本控制可能与 DataTables 主版本相关联，如果在 DataTables 版本发布之前需要扩展版本，则可能会覆盖特定版本）。

ES 模块呢？

DataTables 核心提供了可供加载为 ES 模块的模块文件，我正在研究如何将其扩展到样式集成和扩展的最佳方法。不幸的是，我们需要的关键功能是不要求你列出要加载的每个文件，Import Maps 目前只受基于 Chrome 的浏览器支持。CSS 仍然是一个问题，尽管使用包管理器时这可能有所帮助。