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 操作下拉列表框实现代码
Feb 22 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
Angular5.1新功能分享
Dec 21 Javascript
vue中$nextTick的用法讲解
Jan 17 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP入门速成教程
2007/03/19 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python绘制3D图形
2018/05/03 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
详解python中index()、find()方法
2019/08/29 Python
Python实现手绘图效果实例分享
2020/07/22 Python
python批量修改文件名的示例
2020/09/27 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
表彰先进集体通报
2014/01/12 职场文书
九年级英语教学反思
2014/01/31 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人政治思想总结
2015/03/05 职场文书
大学校园招聘会感想
2015/08/10 职场文书
总经理聘用协议书
2015/09/21 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang