Question

我正在尝试动态加载（又名＆＃39;包括＆＃39;）一系列额外的.js＆＃34;模块＆＃34;来自父脚本的文件。

我这样做是D3可重用图表库的一部分，当我发布时，我实际上运行了一个Makefile，它连接了所说的＆＃34;模块＆＃34;一起放入一个脚本（因此不需要动态包含方法）。但是在测试时我想加载这些＆＃34;模块＆＃34;单独（主要是为了节省我每次对其中一个文件做一个小改动时都要运行Makefile脚本）。

我已经找到了3个可能的解决方案，并写了不同的＆＃39;包括＆＃39;功能，每个解决方案一个：

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，在发布时，我运行以连接＆＃34;模块＆＃34;文件到一个脚本中：

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

然后生成连接：

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

Answer 1

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

动态包含JavaScript模块

1 个答案: