溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue如何實現動態加載腳本

發布時間:2020-09-23 15:17:30 來源:腳本之家 閱讀:447 作者:古墩古墩 欄目:web開發

這篇文章主要介紹了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項目體積。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女