vue如何实现动态加载脚本
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个不错的实践,下面上的代码块叫dynamicLoadScript顾名思义,动态加载脚本,这个js只对加载tinymce有效,不过要想加载其它脚本,稍微做一下改动即可
我们可以建立一个dynamicLoadScript.js文件
上代码:dynamicLoadScript.js
letcallbacks=[];//放一个数组放置回调函数
functionloadedTinymce(){//检测脚本是否加载好的方法如果tinymce加载好了,window对象上会有tinymce属性若要加载其它脚本只需要将此判断改一下即可
//tofixedhttps://github.com/PanJiaChen/vue-element-admin/issues/2144
//checkissuccessfullydownloadedscript
returnwindow.tinymce
}
constdynamicLoadScript=(src,callback)=>{
constexistingScript=document.getElementById(src);//获取script标签元素
constcb=callback||function(){};//拿到回调函数
if(!existingScript){//若没有这个脚本的script标签
constscript=document.createElement('script');//创建一个script标签
script.src=src//srcurlforthethird-partylibrarybeingloaded.
script.id=src
document.body.appendChild(script)
callbacks.push(cb);//将回调函数加到callbacks数组中
constonEnd='onload'inscript?stdOnEnd:ieOnEnd;//若是标准浏览器有onload属性若是ie浏览器没有onload属性
onEnd(script)
}
if(existingScript&&cb){//若此script标签存在并且有回调函数
if(loadedTinymce()){//检测是否有tinymce属性
cb(null,existingScript);//若有tinymce对象,则执行回调函数
}else{
callbacks.push(cb);//若没有tinymce对象,则将回调函数加到回调函数数组内
}
}
functionstdOnEnd(script){//标准浏览器加载好脚本后
script.onload=function(){//脚本加载成功后
//this.onload=nullhereisnecessary
//becauseevenIE9worksnotlikeothers
this.onerror=this.onload=null;//将script标签的onload和onerror属性置空
for(constcbofcallbacks){//执行回调函数之所以用数组放置回调函数是应对我仍然事件的发生
cb(null,script)
}
callbacks=null;//将callbacks置空
}
script.onerror=function(){//脚本加载失败后
this.onerror=this.onload=null;//将script标签的onload和onerror置空覆盖原生的onload事件和nerror事件
cb(newError('Failedtoload'+src),script);//脚本加载错误后执行回调函数,返回报错信息
}
}
functionieOnEnd(script){//若是ie浏览器
script.onreadystatechange=function(){//脚本加载成功后
if(this.readyState!=='complete'&&this.readyState!=='loaded')return;//脚本没加载好则不执行回调函数ie浏览器会自动报错
this.onreadystatechange=null;//若加载成功
for(constcbofcallbacks){//执行回调函数
cb(null,script)//thereisnowaytocatchloadingerrorsinIE8
}
callbacks=null;//置空callbacks
}
}
}
exportdefaultdynamicLoadScript;//暴露出动态加载脚本的方法
怎么使用呢?
在组件中引入上述代码块(其实就是引入那个方法)
importloadfrom'./dynamicLoadScript'
上诉路径可以根据实际情况引入
load(tinymceCDN,(err)=>{//tinymceCDN代表tinymce的CDN地址,下一个参数是回调方法
if(err){//若脚本加载错误,这弹出错误提示
this.$message.error(err.message)
return
}
this.initTinymce();//否则执行初始化tinymce方法
})
以上这种动态加载脚本在vue中,个人认为是个不错的实践,可以缩小vue项目体积。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。