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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
node中实现删除目录的几种方法
Jun 24 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按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
python和C语言混合编程实例
2014/06/04 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
python处理excel绘制雷达图
2019/10/18 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
大学生职业生涯设计书
2014/01/02 职场文书
应聘英语教师求职信
2014/04/24 职场文书
业务内勤岗位职责
2014/04/30 职场文书
水电工程师岗位职责
2015/02/13 职场文书
求职简历自我评价2015
2015/03/10 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript