vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本
這篇文章主要介紹了vue如何實(shí)現(xiàn)動(dòng)態(tài)加載腳本,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
今天在研究,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)加載腳本的方法
怎么使用呢?
在組件中引入上述代碼塊(其實(shí)就是引入那個(gè)方法)
import load from './dynamicLoadScript'
上訴路徑可以根據(jù)實(shí)際情況引入
load(tinymceCDN, (err) => {//tinymceCDN代表tinymce的CDN地址,下一個(gè)參數(shù)是回調(diào)方法
if (err) {//若腳本加載錯(cuò)誤,這彈出錯(cuò)誤提示
this.$message.error(err.message)
return
}
this.initTinymce();//否則執(zhí)行初始化tinymce方法
})
以上這種動(dòng)態(tài)加載腳本在vue中,個(gè)人認(rèn)為是個(gè)不錯(cuò)的實(shí)踐,可以縮小vue項(xiàng)目體積。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 如何通過(guò)shell腳本自動(dòng)生成vue文件詳解
- 解決vue中修改export default中腳本報(bào)一大堆錯(cuò)的問(wèn)題
- vue實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
- vue頁(yè)面加載時(shí)的進(jìn)度條功能(實(shí)例代碼)
- 解決vue項(xiàng)目中頁(yè)面調(diào)用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問(wèn)題
- 在vue中使用防抖和節(jié)流,防止重復(fù)點(diǎn)擊或重復(fù)上拉加載實(shí)例
- 詳解vue頁(yè)面首次加載緩慢原因及解決方案
- 使用Vue實(shí)現(xiàn)調(diào)用接口加載頁(yè)面初始數(shù)據(jù)
- vue+element樹(shù)組件 實(shí)現(xiàn)樹(shù)懶加載的過(guò)程詳解
- mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式
相關(guān)文章
使用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue【推薦】
Proxy 用于修改某些操作的默認(rèn)行為,等同于在語(yǔ)言層面做出修改,所以屬于一種“元編程”。這篇文章主要介紹了用proxy實(shí)現(xiàn)一個(gè)更優(yōu)雅的vue,需要的朋友可以參考下2018-06-06
vue環(huán)形進(jìn)度條組件實(shí)例應(yīng)用
在本文中我們給大家分享了關(guān)于vue環(huán)形進(jìn)度條組件的使用方法以及實(shí)例代碼,需要的朋友們跟著測(cè)試下吧。2018-10-10
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-08-08
關(guān)于element中el-cascader的使用方式
這篇文章主要介紹了關(guān)于element中el-cascader的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題
下面小編就為大家分享一篇解決iview打包時(shí)UglifyJs報(bào)錯(cuò)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue-router路由跳轉(zhuǎn)問(wèn)題 replace
這篇文章主要介紹了vue-router路由跳轉(zhuǎn)問(wèn)題 replace,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09

