在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ VUE中如何保證script標簽引入的JS已經(jīng)加載完成?

VUE中如何保證script標簽引入的JS已經(jīng)加載完成?

clipboard.png
如圖vue中通過script 標簽引入外部JS,

mounted 的時候執(zhí)行外部js的方法時報錯

clipboard.png

應(yīng)該是script 引入的這個js 還未加載完成造成的,加載完成后,手動輸入這個變量就不是未定義了

clipboard.png
所以,要修復這個BUG的話,必須保證外部js 加載完成,但是我不知道如何保證JS加載完成.....請問大神們這要怎么弄呢?

回答
編輯回答
誮惜顏

現(xiàn)代瀏覽器應(yīng)該是按順序加載 js 的，因此在 head 里的 js 肯定會比 webpack 打包后插入的 js 先加載。

簡單代碼驗證如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Order Test</title>

  <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
</head>
<body>
  
  <script>
    console.log(echarts)
  </script>
</body>
</html>

按理不會出現(xiàn)你所說的這個問題，但既然出現(xiàn)這樣的問題了，webpack externals 配置了解一下。

https://webpack.js.org/config...

2017年8月3日 09:19
編輯回答
萌吟

監(jiān)聽onload事件

var scriptEle = document.createElement('script')
scriptEle.onload = function() {
    console.log('加載完了')
}
document.body.appendChild(scriptEle)
2017年3月23日 14:38
編輯回答
孤毒

謝邀！

推薦在main.js中引入echarts并注冊到vue的原型上！
1、npm install echarts --save
2、在main.js中：

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

3、現(xiàn)在可以在全局vue獲取到注冊到原型上的$echarts

一點建議，一般echarts在使用之前都需要進行初始化，所以在vue中初始化最好這么做：

mounted() {
    //將對象先獲取到并存儲起來，下面要用到的地方直接用存儲起來的對象便可
    //后面的對象除了使用document獲取id以外，還可以通過ref的方式，具體可以自己嘗試
    //推薦使用ref來獲取對象
    this.obj_echarts = this.$echarts.init(document.getElementById('xxx'));
},
data(){
    return {
        obj_echarts: null
    }
}
希望我的回答對你有所幫助！
2017年7月14日 20:31