javascript - 动态包含 JavaScript 模块

Question

我正在尝试从父脚本动态加载(也称为“包含”)一系列附加 .js“模块”文件。

我这样做是作为 D3 可重用图表库的一部分，当我发布时，我实际上运行一个 Makefile，它将所述“模块”连接在一起形成一个脚本(因此消除了对动态包含方法的需要)。但是在测试时，我想单独加载这些“模块”(主要是为了避免每次对其中一个文件进行小更改时都必须运行 Makefile 脚本)。

我想出了 3 种可能的解决方案，并编写了不同的“包含”函数，每种解决方案一个:

https://github.com/jamesleesaunders/d3.ez/blob/master/js/d3.ez.js

// Solution 1 - Using document.write
function includeV1(file) {
    var loc = document.currentScript.src
    var path = loc.substring(0, loc.lastIndexOf("/") + 1);
    var src = path + file;
    var type = 'text/javascript';

    document.write('<' + 'script src="' + src + '"' + ' type="' + type + '"><' + '/script>');
}

// Solution 2 - Using document.createElement
function includeV2(file) {
    // Method 2 - Using document.createElement
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');

    var loc = document.currentScript.src
    var path = loc.substring(0, loc.lastIndexOf("/") + 1);

    script.src = path + file;
    script.type = 'text/javascript';
    head.appendChild(script);
}

// Solution 3 - Using D3
function includeV3(file) {
    var loc = document.currentScript.src
    var path = loc.substring(0, loc.lastIndexOf("/") + 1);
    var src = path + file;
    var type = 'text/javascript';

    d3.select('head')
        .append("script")
        .attr('src', src)
        .attr('type', type);
}

调用方式如下:

include('header.js');
include('radialBarChart.js');
include('circularHeatChart.js');
include('discreteBarChart.js');

上面的解决方案 1 似乎工作正常，并且完全符合我的要求，但是解决方案 2 和 3 似乎不起作用？尽管如此，据我所知，他们正在做同样的事情。

我认为可能的区别在于，解决方案 2 和 3 在页面加载后将附加元素插入到 DOM 中(因此当主页面脚本调用模块函数之一时，该元素不可用于主页面脚本)。而我猜测解决方案 1 在调用它的位置添加了标签(因此模块函数在调用时可用于主页脚本)。

如果解决方案 1 是唯一的解决方案，我很高兴，因为它有效，但为了满足我的好奇心，并且因为我正在编写 D3 库，我更愿意使用解决方案 3。

谁能告诉我为什么解决方案 2 和 3 不起作用？或者提出任何修改意见？

我不是在寻找 jQuery 解决方案，但可能有一些 jQuery 专家可能知道？

这里是 Makefile，供引用，在发布时，我运行该文件将“模块”文件连接到单个脚本中:

https://github.com/jamesleesaunders/d3.ez/blob/master/Makefile

然后生成连接:

https://github.com/jamesleesaunders/d3.ez/blob/master/d3.ez.js

Answer 1

现在已经通过使用 ES6 模块解决了这个问题。