這篇文章主要介紹了vue如何實現動態載入指令碼,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

今天在研究，tinymce富文字編輯器怎樣在vue中使用，然後看到其它框架上的使用方法，它是動態載入tinymce指令碼的，若果在本地引入靜態檔案或者，npm安裝都會導致vue專案打包體積過大，這種動態指令碼引入方式，是一個不錯的實踐，下面上的程式碼塊叫 dynamicLoadScript 顧名思義，動態載入指令碼，這個js只對載入tinymce有效，不過要想載入其它指令碼，稍微做一下改動即可

我們可以建立一個dynamicLoadScript.js檔案

上程式碼：dynamicLoadScript.js

let callbacks = [];//放一個數組放置回撥函式

function loadedTinymce() {//檢測指令碼是否載入好的方法 如果tinymce載入好了，window物件上會有tinymce屬性 若要載入其它指令碼只需要將此判斷改一下即可
 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
 // check is successfully downloaded script
 return window.tinymce
}

const dynamicLoadScript = (src,callback) => {
 const existingScript = document.getElementById(src);//獲取script標籤元素
 const cb = callback || function() {};//拿到回撥函式

 if (!existingScript) {//若沒有這個指令碼的script標籤
  const script = document.createElement('script');//建立一個script標籤
  script.src = src // src url for the third-party library being loaded.
  script.id = src
  document.body.appendChild(script)
  callbacks.push(cb);//將回調函式加到callbacks陣列中
  const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//若是標準瀏覽器 有onload屬性 若是ie瀏覽器 沒有onload屬性
  onEnd(script)
 }

 if (existingScript && cb) {//若此script標籤存在 並且有回撥函式
  if (loadedTinymce()) {//檢測是否有tinymce屬性
   cb(null,existingScript);//若有tinymce物件，則執行回撥函式
  } else {
   callbacks.push(cb);//若沒有tinymce物件，則將回調函式加到回撥函式陣列內
  }
 }

 function stdOnEnd(script) {//標準瀏覽器載入好指令碼後
  script.onload = function() {//指令碼載入成功後
   // this.onload = null here is necessary
   // because even IE9 works not like others
   this.onerror = this.onload = null;//將script標籤的onload和onerror屬性置空
   for (const cb of callbacks) {//執行回撥函式 之所以用陣列放置回撥函式是應對 我仍然事件的發生
    cb(null,script)
   }
   callbacks = null;//將callbacks置空
  }
  script.onerror = function() {//指令碼載入失敗後
   this.onerror = this.onload = null;//將script標籤的onload和onerror置空 覆蓋原生的onload事件和nerror事件
   cb(new Error('Failed to load ' + src),script);//指令碼載入錯誤後執行回撥函式，返回報錯資訊
  }
 }

 function ieOnEnd(script) {//若是ie瀏覽器 
  script.onreadystatechange = function() {//指令碼載入成功後
   if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//指令碼沒載入好則不執行回撥函式 ie瀏覽器會自動報錯
   this.onreadystatechange = null;//若 載入成功
   for (const cb of callbacks) {//執行回撥函式
    cb(null,script) // there is no way to catch loading errors in IE8
   }
   callbacks = null;//置空callbacks
  }
 }
}

export default dynamicLoadScript;//暴露出動態載入指令碼的方法

怎麼使用呢？

在元件中引入上述程式碼塊（其實就是引入那個方法）

import load from './dynamicLoadScript'

上訴路徑可以根據實際情況引入

load(tinymceCDN,(err) => {//tinymceCDN代表tinymce的CDN地址，下一個引數是回撥方法
    if (err) {//若指令碼載入錯誤，這彈出錯誤提示
     this.$message.error(err.message)
     return
    }
    this.initTinymce();//否則執行初始化tinymce方法
   })

以上這種動態載入指令碼在vue中，個人認為是個不錯的實踐，可以縮小vue專案體積。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。