动态引入cdn服务

前言

有些第三方插件是通过cdn提供服务的，比如腾讯地图，highcharts等。常规操作是通过script标签引入，但有些情况只是个别页面使用到，没有必要开始就引入。

动态引入

script加载是一个异步的操作，使用promise处理异步加载。

1. 创建script元素
2. 指定类型
3. 设置资源路径
4. 添加到head中
5. 加载成功，调用resolve
6. 加载失败，调用reject

示例

1.腾讯地图API

export function Map(key) {
    return new Promise((resolve, reject) => {
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "//map.qq.com/api/js?v=2.exp&callback=init&key="+key;
      script.onload = () => {
          resolve(qq)     // qq实际是一个对象，其中包含maps，maps也是一个对象，封装了腾讯地图api的功能
      }
      script.onerror = reject;
      document.head.appendChild(script);
   })
}

2. heightcharts

export function HighChart() {
    return new Promise((resolve, reject) => {
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "//cdn.hcharts.cn/highcharts/highcharts.js";
        script.onload = () => {
            resolve(Highcharts)   //  Heightcharts实际是一个对象，封装了heightcharts提供的方法
        }
        script.onerror = reject;
        document.head.appendChild(script);
    });
 }