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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
Ajax实现三级联动效果
Oct 05 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抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
Web程序工作原理详解
2014/12/25 PHP
完美的php分页类
2017/10/24 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
生物化学研究助理员求职信
2013/10/09 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
会计专业的自荐信
2013/12/12 职场文书
广告词串烧
2014/03/19 职场文书
特教教师先进事迹
2014/05/21 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
病危通知书样本
2015/04/17 职场文书
通知格式
2015/04/27 职场文书
简单的辞职信模板
2015/05/12 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android