JS实现动态加载脚本

前记

本文是基于ES6语法的 async 和 await 语句， 实现 JS 动态 加载 脚本 。

具体代码

考虑回调方法可能需要有返回值， 这里只实现了动态加载js脚本，回调方法在回调之后写即可

本文以 Vue 为例， 自带去重功能

methods: {
        // 合并数组或对象 
        // raw 是原对象
        // ext 是需要合并的对象
        // override 是否覆盖 raw 原来的key， 默认会覆盖
        extend(raw, ext, override = true) {
            for(let key in ext){
                if(!raw.hasOwnProperty(key) || override){
                    raw[key]=ext[key];
                }
            }
            return raw;
        },
        // 动态加载 js 及 回调
        async  loadScript(src) {
            await new Promise(resolve => {
                // 如果已经加载了本js，直接调用回调
                if (this._checkIsLoadScript(src)) {
                    resolve();
                }
                let scriptNode = document.createElement("script");
                scriptNode.setAttribute("type", "text/javascript");
                scriptNode.setAttribute("src", src);
                document.body.appendChild(scriptNode);
                if (scriptNode.readyState) { //IE 判断
                    scriptNode.onreadystatechange = () => {
                        if (scriptNode.readyState == "complete" || scriptNode.readyState == 'loaded') {
                            resolve();
                        }
                    }
                } else {
                    scriptNode.onload = () => {
                        console.log("script loaded");
                        resolve();
                    }
                }
            })
        },
        // 检测是否加载了 js 文件
        _checkIsLoadScript(src) {
            let scriptObjs = document.getElementsByTagName('script');
            for(let sObj of scriptObjs) {
                if (sObj.src == src) {
                    return true;
                }
            }
            return false;
        }
}

调用的方法 必须是 async 方法， 用 await 调用即可， 例如：

async  loginByWechat() {
      await this.loadScript("wechat.js");
      ……
}

如此， 就可以顺序写代码了……