2021-11-02 vue项目中动态引入远程(第三方)js和c
将index.html中的远程js和css设置为可配置的动态加载
之前：index.html中写死了js与css的路径，每次打包都要修改index.html文件或者用替换的方式将index.html中的网址换为新的要部署地区的网址，给部署人员带来复杂的操作；开发人员进行部署测试也很不方便。
现在：通过Promise实现了异步加载js的方法，将js和css从index.html中提取出来，变成路径可配置的形式，简化了部署步骤以及开发测试的工作。
主要解决了vue的mounted阶段使用到js中的对象，控制台提示变量未定义的错误。因为无论是用document.write还是用原生js直接添加到dom树上的方法，都是会在mounted挂载阶段完成之后再解析js，所以，一直会遇到“XX变量未定义”的错误
Promise的定义：promise是对异步编程的一种抽象。它是一个代理对象，代表一个必须进行异步处理的函数返回的值或抛出的异常。
Q是nodeJs中实现promise的包之一，是nodexJs中比较常用的一个库。
下面来说一说具体实现：
一、安装Q
npm install q -save
二、在项目中的使用：
2.1 创建用于加载js、css的文件
文件名为loadResources.js，文件内容如下：
/**
* Created by 飞呀 on 2018/1/9.
*/
//加载css与js文件
var Q=require('q');
export default function asyncLoadJs (url) {
return Q.Promise((resolve, reject) => {
let srcArr = document.getElementsByTagName("script");
let hasLoaded = false;
for (let i=0;i<srcArr.length;i++){//判断当前js是否加载上
hasLoaded = (srcArr[i].src==url)?true:false;
}
if (hasLoaded) {
resolve();
return;
}
let script = document.createElement('script')
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
script.onload = () => {
resolve();
}
script.onerror = () => {
reject();
}
})
}
export function loadCss(url){
let css = document.createElement('link');
css.href = url;
css.rel = 'stylesheet';
css.type = 'text/css';
document.head.appendChild(css);
}
export function loadMineMapJs () {
//加载css
loadCss( appDomainRoot+"/minemapapi/v1.3/minemap.css");
loadCss( appDomainRoot+"/minemapapi/v1.3/plugins/draw/minemap-draw.css");
loadCss( appDomainRoot+"/minemapapi/v1.3/plugins/edit/minemap-edit.css");
//加载js
return Q.Promise((resolve, reject) => {
asyncLoadJs("./static/js/minemap_wmts.js")//开发用
/*asyncLoadJs(appDomainRoot + "/minemapapi/demo/js/minemap-wmts.js")//部署用*/
.then(() => {
return asyncLoadJs(appDomainRoot + "/minemapapi/v1.3/plugins/draw/minemap-draw.js")
})
.then(() => {
return asyncLoadJs(appDomainRoot + "/minemapapi/v1.3/plugins/edit/minemap-edit.js")
})
.then(() => {
resolve()
})
.catch(err => {
reject(err)
})
})
}
需要注意的是，loadMineMapJs方法中要加载多个js可以在后面加then方法再次返回asyncLoadJs方法，这是级联的用法。
2.2 组件中对于异步加载js模块的使用
引入模块
import {loadMineMapJs} from '../globals/loadResources'
紧随其后，定义一个用于判断所有js是否加载完成的一个标志
let loadedMineMapJs = false;//是否加载完js
因为loadedMineMapJs这个变量在created阶段就要使用到，所以不能放在data里面。
image.png
created阶段：
created(){//判断浏览器是否加载过js
if (!loadedMineMapJs) {
loadMineMapJs().then(() => {
loadedMineMapJs = true;
})
}
},
mounted阶段：
mounted(){
let _this = this;
//循环判断是否加载完js
let interval = setInterval(()=>{
if(loadedMineMapJs){
clearInterval(interval);
_this.controller = new HomeController(_this);
_this.controller.initMapEdit(null, null, null);
}
},100);
...
}，
下面这两句是我会用到js中生成对象的地方，所以需要在js完成后执行
_this.controller = new HomeController(_this);
_this.controller.initMapEdit(null, null, null);
2.3 对于网址的配置
在serverConfig下的index.js文件中配置了第一步中用到appDomainRoot（前提是index.js文件在static文件夹下，不会被webpack打包），修改的时候只需要修改appDomainRoot的值即可，变量未定义的问题顺利解决。
文件结构：
image.png
index.js中配置如下：
let appDomainRoot= 'http://192.168.XX.XX';
这个功能难就难在index.html中引入的js和css会直接在html解析时就引入，一旦使用动态添加到dom树的js语句（比如document.body.appendChild（））的方式添加动态script必然导致浏览器在解析到这些js时重新生成dom树，经测试这种方式会在vue挂载前拼接到index.html中,但是要等到挂载结束才会被解析，所以在挂载阶段用到js解析生成的对象会一直出现“变量未定义”的错误。
使用document.write（）的方式虽然可以实现，但是浏览器会输出警告，大意是浏览器正在解析跨域资源，而且有几条动态js就会警告几次，而且在控制台占的面积相对较大，所以最好还是不要使用这个方式。
