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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。