vue项目中动态引入远程(第三方)js和css

将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里面。

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的值即可，变量未定义的问题顺利解决。

文件结构：

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就会警告几次，而且在控制台占的面积相对较大，所以最好还是不要使用这个方式。