动态包含JavaScript模块

Question

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

我是作为D3可重用图表库的一部分来执行此操作的，当我发布该库时，我实际上运行了一个Makefile，该文件将所述“模块”连接在一起成为一个脚本（因此无需使用动态include方法）。 但是在测试时，我想分别加载这些“模块”（主要是为了避免我每次对其中一个文件进行较小更改时都必须运行Makefile脚本）。

我找出了3种可能的解决方案，并编写了不同的“ include”函数，每种解决方案一个：

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模块解决了这一问题。