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就会警告几次,而且在控制台占的面积相对较大,所以最好还是不要使用这个方式。
posted @ 2018-01-10 16:49 飞呀faye 阅读(...) 评论(...) 编辑 收藏