這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、大箐山ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的大箐山網(wǎng)站制作公司
今天在研究，tinymce富文本編輯器怎樣在vue中使用，然后看到其它框架上的使用方法，它是動態(tài)加載tinymce腳本的，若果在本地引入靜態(tài)文件或者，npm安裝都會導(dǎo)致vue項目打包體積過大，這種動態(tài)腳本引入方式，是一個不錯的實踐，下面上的代碼塊叫 dynamicLoadScript 顧名思義，動態(tài)加載腳本，這個js只對加載tinymce有效，不過要想加載其它腳本，稍微做一下改動即可
我們可以建立一個dynamicLoadScript.js文件
上代碼：dynamicLoadScript.js
重慶分公司
重慶分公司
let callbacks = [];//放一個數(shù)組放置回調(diào)函數(shù)
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標(biāo)簽元素
const cb = callback || function() {};//拿到回調(diào)函數(shù)
if (!existingScript) {//若沒有這個腳本的script標(biāo)簽
const script = document.createElement('script');//創(chuàng)建一個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瀏覽器 沒有onload屬性
onEnd(script)
}
if (existingScript && cb) {//若此script標(biāo)簽存在 并且有回調(diào)函數(shù)
if (loadedTinymce()) {//檢測是否有tinymce屬性
cb(null, existingScript);//若有tinymce對象，則執(zhí)行回調(diào)函數(shù)
} else {
callbacks.push(cb);//若沒有tinymce對象，則將回調(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)對 我仍然事件的發(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);//腳本加載錯誤后執(zhí)行回調(diào)函數(shù)，返回報錯信息
}
}
function ieOnEnd(script) {//若是ie瀏覽器
script.onreadystatechange = function() {//腳本加載成功后
if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//腳本沒加載好則不執(zhí)行回調(diào)函數(shù) ie瀏覽器會自動報錯
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;//暴露出動態(tài)加載腳本的方法怎么使用呢？
在組件中引入上述代碼塊（其實就是引入那個方法）
import load from './dynamicLoadScript'
上訴路徑可以根據(jù)實際情況引入
load(tinymcecdn, (err) => {//tinymceCDN代表tinymce的CDN地址，下一個參數(shù)是回調(diào)方法
if (err) {//若腳本加載錯誤，這彈出錯誤提示
this.$message.error(err.message)
return
}
this.initTinymce();//否則執(zhí)行初始化tinymce方法
})以上這種動態(tài)加載腳本在vue中，個人認(rèn)為是個不錯的實踐，可以縮小vue項目體積。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
