這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

專(zhuān)注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)弋陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

今天在研究，tinymce富文本編輯器怎樣在vue中使用，然后看到其它框架上的使用方法，它是動(dòng)態(tài)加載tinymce腳本的，若果在本地引入靜態(tài)文件或者，npm安裝都會(huì)導(dǎo)致vue項(xiàng)目打包體積過(guò)大，這種動(dòng)態(tài)腳本引入方式，是一個(gè)不錯(cuò)的實(shí)踐，下面上的代碼塊叫 dynamicLoadScript 顧名思義，動(dòng)態(tài)加載腳本，這個(gè)js只對(duì)加載tinymce有效，不過(guò)要想加載其它腳本，稍微做一下改動(dòng)即可

我們可以建立一個(gè)dynamicLoadScript.js文件

上代碼：dynamicLoadScript.js

let callbacks = [];//放一個(gè)數(shù)組放置回調(diào)函數(shù)

function loadedTinymce() {//檢測(cè)腳本是否加載好的方法 如果tinymce加載好了，window對(duì)象上會(huì)有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標(biāo)簽元素
 const cb = callback || function() {};//拿到回調(diào)函數(shù)

 if (!existingScript) {//若沒(méi)有這個(gè)腳本的script標(biāo)簽
  const script = document.createElement('script');//創(chuàng)建一個(gè)script標(biāo)簽
  script.src = src // src url for the third-party library being loaded.
  script.id = src
  document.body.appendChild(script)
  callbacks.push(cb);//將回調(diào)函數(shù)加到callbacks數(shù)組中
  const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//若是標(biāo)準(zhǔn)瀏覽器 有onload屬性 若是ie瀏覽器 沒(méi)有onload屬性
  onEnd(script)
 }

 if (existingScript && cb) {//若此script標(biāo)簽存在 并且有回調(diào)函數(shù)
  if (loadedTinymce()) {//檢測(cè)是否有tinymce屬性
   cb(null, existingScript);//若有tinymce對(duì)象，則執(zhí)行回調(diào)函數(shù)
  } else {
   callbacks.push(cb);//若沒(méi)有tinymce對(duì)象，則將回調(diào)函數(shù)加到回調(diào)函數(shù)數(shù)組內(nèi)
  }
 }

 function stdOnEnd(script) {//標(biāo)準(zhǔn)瀏覽器加載好腳本后
  script.onload = function() {//腳本加載成功后
   // this.onload = null here is necessary
   // because even IE9 works not like others
   this.onerror = this.onload = null;//將script標(biāo)簽的onload和onerror屬性置空
   for (const cb of callbacks) {//執(zhí)行回調(diào)函數(shù) 之所以用數(shù)組放置回調(diào)函數(shù)是應(yīng)對(duì) 我仍然事件的發(fā)生
    cb(null, script)
   }
   callbacks = null;//將callbacks置空
  }
  script.onerror = function() {//腳本加載失敗后
   this.onerror = this.onload = null;//將script標(biāo)簽的onload和onerror置空 覆蓋原生的onload事件和nerror事件
   cb(new Error('Failed to load ' + src), script);//腳本加載錯(cuò)誤后執(zhí)行回調(diào)函數(shù)，返回報(bào)錯(cuò)信息
  }
 }

 function ieOnEnd(script) {//若是ie瀏覽器 
  script.onreadystatechange = function() {//腳本加載成功后
   if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//腳本沒(méi)加載好則不執(zhí)行回調(diào)函數(shù) ie瀏覽器會(huì)自動(dòng)報(bào)錯(cuò)
   this.onreadystatechange = null;//若 加載成功
   for (const cb of callbacks) {//執(zhí)行回調(diào)函數(shù)
    cb(null, script) // there is no way to catch loading errors in IE8
   }
   callbacks = null;//置空callbacks
  }
 }
}

export default dynamicLoadScript;//暴露出動(dòng)態(tài)加載腳本的方法

文章標(biāo)題：vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本-創(chuàng)新互聯(lián)
瀏覽路徑：http://weahome.cn/article/dihoij.html