vue如何實現(xiàn)動態(tài)加載腳本
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
今天在研究,tinymce富文本編輯器怎樣在vue中使用,然后看到其它框架上的使用方法,它是動態(tài)加載tinymce腳本的,若果在本地引入靜態(tài)文件或者,npm安裝都會導致vue項目打包體積過大,這種動態(tài)腳本引入方式,是一個不錯的實踐,下面上的代碼塊叫 dynamicLoadScript 顧名思義,動態(tài)加載腳本,這個js只對加載tinymce有效,不過要想加載其它腳本,稍微做一下改動即可
我們可以建立一個dynamicLoadScript.js文件
上代碼:dynamicLoadScript.js
let callbacks = [];//放一個數(shù)組放置回調函數(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標簽元素 const cb = callback || function() {};//拿到回調函數(shù) if (!existingScript) {//若沒有這個腳本的script標簽 const script = document.createElement('script');//創(chuàng)建一個script標簽 script.src = src // src url for the third-party library being loaded. script.id = src document.body.appendChild(script) callbacks.push(cb);//將回調函數(shù)加到callbacks數(shù)組中 const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//若是標準瀏覽器 有onload屬性 若是ie瀏覽器 沒有onload屬性 onEnd(script) } if (existingScript && cb) {//若此script標簽存在 并且有回調函數(shù) if (loadedTinymce()) {//檢測是否有tinymce屬性 cb(null, existingScript);//若有tinymce對象,則執(zhí)行回調函數(shù) } else { callbacks.push(cb);//若沒有tinymce對象,則將回調函數(shù)加到回調函數(shù)數(shù)組內 } } 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) {//執(zhí)行回調函數(shù) 之所以用數(shù)組放置回調函數(shù)是應對 我仍然事件的發(fā)生 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);//腳本加載錯誤后執(zhí)行回調函數(shù),返回報錯信息 } } function ieOnEnd(script) {//若是ie瀏覽器 script.onreadystatechange = function() {//腳本加載成功后 if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//腳本沒加載好則不執(zhí)行回調函數(shù) ie瀏覽器會自動報錯 this.onreadystatechange = null;//若 加載成功 for (const cb of callbacks) {//執(zhí)行回調函數(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ù)是回調方法 if (err) {//若腳本加載錯誤,這彈出錯誤提示 this.$message.error(err.message) return } this.initTinymce();//否則執(zhí)行初始化tinymce方法 })
以上這種動態(tài)加載腳本在vue中,個人認為是個不錯的實踐,可以縮小vue項目體積。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- 如何通過shell腳本自動生成vue文件詳解
- 解決vue中修改export default中腳本報一大堆錯的問題
- vue實現(xiàn)網(wǎng)絡圖片瀑布流 + 下拉刷新 + 上拉加載更多(步驟詳解)
- vue頁面加載時的進度條功能(實例代碼)
- 解決vue項目中頁面調用數(shù)據(jù) 在數(shù)據(jù)加載完畢之前出現(xiàn)undefined問題
- 在vue中使用防抖和節(jié)流,防止重復點擊或重復上拉加載實例
- 詳解vue頁面首次加載緩慢原因及解決方案
- 使用Vue實現(xiàn)調用接口加載頁面初始數(shù)據(jù)
- vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
- mpvue 頁面預加載新增preLoad生命周期的兩種方式
相關文章
vue3+typescript實現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實現(xiàn)圖片懶加載插件,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10vue菜單欄聯(lián)動內容頁面tab的實現(xiàn)示例
本文主要介紹了vue菜單欄聯(lián)動內容頁面tab的實現(xiàn)示例,左側菜單欄與右側內容部分聯(lián)動,當點擊左側的菜單,右側會展示對應的tab,具有一定的參考價值,感興趣的可以了解一下2024-01-01