Javascript 导入的JS文件具有未知属性

我想通过一个js文件加载脚本和css文件

this.importCascadingStyleSheet = function(path){ // import CSS file
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
    element.setAttribute("href", path);
    this.appendComponent(element);
}

this.importScript = function(path){ // import JS file
    var script = document.createElement('script');
    script.src = path;
    this.appendComponent(script);
}

this.appendComponent = function(cmp){ // append file to document
    document.head.appendChild(cmp);
}

this.getLibPath = function(){
    var dir = document.querySelector('script[src$="diagramViewer.js"]').getAttribute('src');
    var fileName = dir.split('/').pop();
    var parentDir = dir.replace('/' + fileName, ""); 
    var directoryName = parentDir.split('/').pop();
    return parentDir.replace('/' + directoryName, ""); 
}

this.importStyle = function(fileName){ // helper function
    this.importCascadingStyleSheet(this.libPath + "/style/" + fileName + ".css");
}

this.importSource = function(fileName){ // helper function
    this.importScript(this.libPath + "/client/" + fileName + ".js");
}

// Code starts here

this.libPath = this.getLibPath(); // get the directory of the library

this.importStyle("myFirstCssFile");

this.importSource("firstScript");
this.importSource("secondScript");
this.importSource("thirdScript");

我想导入此脚本中的所有文件。这条路是正确的。不知何故，我无法使用其他脚本中的函数。他们不为人知

在开发人员控制台的“网络”选项卡中，导入了所有我的文件。css文件工作正常。我所有的js文件都是空的

状态为“挂起”

---

如果给定的路径是正确的，我会错过什么？

听起来好像您试图过早地使用它们。您正在执行的操作将启动加载这些脚本的过程，然后异步继续。在进程完成之前，脚本定义的函数将不可访问，这将在以后（数十毫秒甚至数百毫秒之后，取决于网络性能）

您需要更新

importSource

/

importScript

，这样您就可以知道脚本已完成加载。例如，他们可以回报承诺

例如，在一个模糊的现代浏览器上，

importScript

可能如下所示：

this.importScript = function(path){ // import JS file
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.onload = resolve;
        script.onerror = reject;
        script.src = path;
        this.appendComponent(script);
    });
};

importSource

希望从

importScript

返回返回值：

this.importSource = function(fileName){ // helper function
    return this.importScript(this.libPath + "/client/" + fileName + ".js");
};

然后您可以使用

Promise.all

等待它们全部加载：

Promise.all([
    this.importSource("firstScript"),
    this.importSource("secondScript"),
    this.importSource("thirdScript")
])
.then(function() {
    // All good, use the functions
})
.catch(function() {
    // At least one of them failed to load
});

---

为什么要重新发明这个轮子？浏览器在这方面已经做得很好了，如果你真的觉得需要编程控制，那么现有的资源加载器很多……非常感谢你的帮助，但我必须支持IE 9，并且Internet Explorer不支持以下承诺：（@MatthiasHermsen-您可以使用IE9中的多个承诺库中的任意一个。不支持本机承诺并不意味着您不能使用它们。（或者使用普通回调，但上面的基本点仍然是：您需要提供一种等待完成的方法。承诺以一种易于聚合的方式完成。）“网络”选项卡中的文件状态为“挂起”，因此我认为您可能是对的