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項目體積。

 

 

 

 

 

。