Question

我想通过一个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文件都是空的。

状态为pending。

如果给定路径正确，我会丢失什么？

Answer 1

听起来您要过早使用它们。您正在做的事情将开始加载这些脚本的过程，然后异步进行。脚本定义的功能只有在该过程完成后才能访问，该过程将稍后（取决于网络性能，数十或什至几百毫秒）。

您将需要更新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
});

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

1 个答案: