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

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

clipboard.png
如圖vue中通過script 標(biāo)簽引入外部JS,

mounted 的時(shí)候執(zhí)行外部js的方法時(shí)報(bào)錯(cuò)

clipboard.png

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

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

回答
編輯回答
誮惜顏

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

簡單代碼驗(yàn)證如下：

<!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>

按理不會(huì)出現(xiàn)你所說的這個(gè)問題，但既然出現(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并注冊(cè)到vue的原型上！
1、npm install echarts --save
2、在main.js中：

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

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

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

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