按特定顺序加载多个脚本

Question

我需要按特定顺序加载多个js脚本。事实上我是用打字稿做的，我不能使用 jQuery，只能使用纯 ts/js。我现在拥有的是：

var script1 = document.createElement('script');
script1.type = 'text/javascript';
script1.src = 'script1.js';
document.head.appendChild(script1);
script1.onload = function () {

    var script2 = document.createElement('script');
    script2.type = 'text/javascript';
    script2.src = 'script2.js';
    document.head.appendChild(script2);
    script2.onload = function () {

        etc...

    }

}

它有效，但我相信有更优雅的方法来做到这一点？请用 vanilla javascript 或打字稿给出示例。

Answer 1

是的！有。使用 Promises 和 async/await

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    document.head.appendChild(script)
    script.onload = () => resolve()
  })
}

async function loadScripts() {
  await loadScript('script1.js')
  await loadScript('script2.js')
  // ..
}

loadScripts().then(_ => console.log('All scripts loaded in specified order'))

Answer 2

更优雅的方式可能类似于下面的代码，您首先定义所有内容，但仍按上面的顺序加载所有内容。这里使用辅助函数追加，然后设置下一个脚本的加载函数，并将脚本引用存储在一个数组中，使这个精简。

/*
* Load the scripts in a specific order
*/
function loadScripts() {
    var scripts = [];
    var numScripts = 2
    for (let i=0; i<numScripts, i++) {
        scripts[i] = document.createElement('script');
        scripts[i].type = 'text/javascript';
        scripts[i].src = '"script"+i+".js"; //NOTE: if your scripts start on 1, not 0, you need "i+i"
    }
    loadScriptHelper(scripts,0);
}

/*
* Helper function for load scripts
*/
function loadScriptHelper(scripts,i) {
    document.head.appendChild(scripts[i]);
    scripts[i].onload = function() {
        loadScriptHelper(scripts,i+1);
    }
}

按特定顺序加载多个脚本

Load several scripts in certain order

javascript

onload

typescript