本文已参与「新人创作礼」活动，一起开启掘金创作之路。

如何动态加载js 并保证加载顺序

1.普通版本

//普通版本  无法保证顺序
function loadScript1(url, doc = document) {
      let script_ = doc.createElement("script");
     script_.type = "text/javascript";
     script_.src = url;
     script_.onload = function () {
            console.log(url);
     };
     doc.body.appendChild(script_);
}

//调用方法，下载时无法保证顺序

loadScript1('//unpkg.com/vue@latest/dist/vue.min.js');
loadScript1('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js');
loadScript1('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js')

2.回调版本

//带回调的版本
function loadScript2(url, loadCallback, doc = document) {
    let script_ = doc.createElement("script");
    script_.type = "text/javascript";
    script_.src = url;
    script_.onload = function () {
        console.log(url);
        loadCallback();
    };
    doc.body.appendChild(script_);
}


//调用方法，为了保证顺序需要回调嵌套
loadScript2('//unpkg.com/vue@latest/dist/vue.min.js',()=>{

    loadScript2('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js',()=>{

        loadScript2('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js');
    })

});

3.promise版本

//promise版本
function loadScript3(url, doc = document) {
    return new Promise(function (resolve) {
        let script_ = doc.createElement("script");
        script_.type = "text/javascript";
        script_.src = url;
        script_.onload = function () {
              console.log(url);
            resolve();
        };
        doc.body.appendChild(script_);
    });
}

// Promise 链式调用 保证顺序

loadScript3('//unpkg.com/vue@latest/dist/vue.min.js').then(()=>{
    loadScript3('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js')
}).then(()=>{
    loadScript3('//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js')
})