vuecli3 引入script 針對沒有cmd amd require等方式的js


最近做高德開發,需要引入高德的js,但是 說實話 高德官方的文檔不知道大佬們有沒有看懂,反正我是沒看懂,寫的都什么鬼?我怎么引都引入不了,迫不得已想到了如下方法:

一、准備一個能夠在頁面中插入js的方法

export default function remoteLoad (url, hasCallback) {
    return createScript(url)
    /**
     * 創建script
     * @param url
     * @returns {Promise}
     */
    function createScript (url) {
      var scriptElement = document.createElement('script')
      document.body.appendChild(scriptElement)
      var promise = new Promise((resolve, reject) => {
        scriptElement.addEventListener('load', e => {
          removeScript(scriptElement)
          if (!hasCallback) {
            resolve(e)
          }
        }, false)
  
        scriptElement.addEventListener('error', e => {
          removeScript(scriptElement)
          reject(e)
        }, false)
  
        if (hasCallback) {
          window.____callback____ = function () {
            resolve()
            window.____callback____ = null
          }
        }
      })
  
      if (hasCallback) {
        url += '&callback=____callback____'
      }
  
      scriptElement.src = url
  
      return promise
    }
  
    /**
     * 移除script標簽
     * @param scriptElement script dom
     */
    function removeScript (scriptElement) {
      document.body.removeChild(scriptElement)
    }
  }

針對所有問題,將該文件放置於utils文件夾下

使用方法

目標頁面:

import remoteLoad from "@/utils/remoteLoad.js";
async created() {
    // 已載入高德地圖API,則直接初始化地圖
    // console.log(this.AMap,window.AMap)
    if (window.AMap && this.AMap){
      
      this.initMap();
      // 未載入高德地圖API,則先載入API再初始化
    } else {
      
      await remoteLoad(
        `https://webapi.amap.com/maps?v=1.4.10&key=${MapKey}&plugin=AMap.DistrictSearch`
      );
        await remoteLoad('https://a.amap.com/jsapi_demos/static/citys.js')
      this.initMap();
    }

至此已經做到引入js並且初始化地圖。具體想封裝成組件還是直接在頁面使用都是可以的,而且只加載一次,避免了反復引入的問題,感謝大佬觀看


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM