vue如何实现动态加载脚本


Posted in Javascript onFebruary 05, 2020

这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个不错的实践,下面上的代码块叫 dynamicLoadScript 顾名思义,动态加载脚本,这个js只对加载tinymce有效,不过要想加载其它脚本,稍微做一下改动即可

我们可以建立一个dynamicLoadScript.js文件

上代码:dynamicLoadScript.js

let callbacks = [];//放一个数组放置回调函数

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() {};//拿到回调函数

 if (!existingScript) {//若没有这个脚本的script标签
  const script = document.createElement('script');//创建一个script标签
  script.src = src // src url for the third-party library being loaded.
  script.id = src
  document.body.appendChild(script)
  callbacks.push(cb);//将回调函数加到callbacks数组中
  const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//若是标准浏览器 有onload属性 若是ie浏览器 没有onload属性
  onEnd(script)
 }

 if (existingScript && cb) {//若此script标签存在 并且有回调函数
  if (loadedTinymce()) {//检测是否有tinymce属性
   cb(null, existingScript);//若有tinymce对象,则执行回调函数
  } else {
   callbacks.push(cb);//若没有tinymce对象,则将回调函数加到回调函数数组内
  }
 }

 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) {//执行回调函数 之所以用数组放置回调函数是应对 我仍然事件的发生
    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);//脚本加载错误后执行回调函数,返回报错信息
  }
 }

 function ieOnEnd(script) {//若是ie浏览器 
  script.onreadystatechange = function() {//脚本加载成功后
   if (this.readyState !== 'complete' && this.readyState !== 'loaded') return;//脚本没加载好则不执行回调函数 ie浏览器会自动报错
   this.onreadystatechange = null;//若 加载成功
   for (const cb of callbacks) {//执行回调函数
    cb(null, script) // there is no way to catch loading errors in IE8
   }
   callbacks = null;//置空callbacks
  }
 }
}

export default dynamicLoadScript;//暴露出动态加载脚本的方法

怎么使用呢?

在组件中引入上述代码块(其实就是引入那个方法)

import load from './dynamicLoadScript'

上诉路径可以根据实际情况引入

load(tinymceCDN, (err) => {//tinymceCDN代表tinymce的CDN地址,下一个参数是回调方法
    if (err) {//若脚本加载错误,这弹出错误提示
     this.$message.error(err.message)
     return
    }
    this.initTinymce();//否则执行初始化tinymce方法
   })

以上这种动态加载脚本在vue中,个人认为是个不错的实践,可以缩小vue项目体积。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
JavaScript中return false的用法
Mar 12 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
Vue组件基础用法详解
Feb 05 #Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 #Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 #Javascript
Vuex的API文档说明详解
Feb 05 #Javascript
如何实现iframe父子传参通信
Feb 05 #Javascript
JavaScript对象原型链原理详解
Feb 05 #Javascript
You might like
深入PHP FTP类的详解
2013/06/13 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
javascript读取RSS数据
2007/01/20 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
javascript类型转换示例
2014/04/29 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
python多线程操作实例
2014/11/21 Python
python常见数制转换实例分析
2015/05/09 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python实现吃苹果小游戏
2020/03/21 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
初中生自我评价
2014/02/01 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
护士医德医风心得体会
2016/01/25 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python