vue 动态创建script 加载 js

﹏ヽ暗。殇╰゛Y 2023-06-15 07:29 19阅读 0赞

import Vue from 'vue'

const cerateScriptLoaded = url => \{

return new Promise((resolve, reject) => \{

const script = document.createElement('script')

script.src = url

script.onload = function () \{

resolve()

\}

document.body.appendChild(script)

\})

\}

const loadedScripts = \[\]

const loadScripts = urls => \{

const diffUrls = urls.filter(item => loadedScripts.indexOf(item) < 0)

loadedScripts.push(...diffUrls)

return new Promise(resolve => \{

function doLoad (url) \{

cerateScriptLoaded(url).then(() => \{

if (diffUrls.length > 0) \{

doLoad(diffUrls.shift())

\} else \{

resolve()

\}

\})

\}

if (diffUrls.length > 0) \{

doLoad(diffUrls.shift())

\} else \{

resolve()

\}

\})

\}

Vue.prototype.loadScripts = loadScripts

// 页面中使用

const outerScripts = \[

baseUrl + '/js/jquery-resize.js',

baseUrl + '/js/jquery.nicescroll.min.js',

baseUrl + '/js/assist.js',

baseUrl + '/js/index.js',

baseUrl + '/plugins/jquery-jqGrid/jquery.jqGrid.min.js',

baseUrl + '/plugins/jquery-jqGrid/jqGrid.extends.min.js',

baseUrl + '/plugins/layer/3.1/layer.js',

baseUrl + '/plugins/jquery-toastr/toastr.js',

baseUrl + '/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js',

baseUrl + '/plugins/echart/echarts.min.js'

\]

Vue.prototype.loadScripts(outerScripts).then(() => \{

next()

\})

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关 javaScript高性能执行和加载(动态地创建script元素)

javaScript阻塞特性 javaScript中有个阻塞的特性，就是当浏览器在执行js代码时，不能同时做其他任何事情，无论js代码是内嵌的还是外部引入的。为了改善

你的名字/ 2023年07月24日 02:52/ 0 赞/ 29 阅读

相关 vue 动态创建script 加载 js

import Vue from 'vue' const cerateScriptLoaded = url => \{ return new Promise((resol

﹏ヽ暗。殇╰゛Y/ 2023年06月15日 07:29/ 0 赞/ 20 阅读

相关动态加载js文件

在日常开发中有很多时候需要动态加载js文件的场景，先看代码再看例子。 / 动态加载js文件 @params {String} url 动态加载js文件路径 @p

柔情只为你懂/ 2023年01月14日 01:58/ 0 赞/ 255 阅读

相关 js动态加载js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

约定不等于承诺〃/ 2022年08月27日 05:52/ 0 赞/ 267 阅读

相关【JS】使用JS动态加载

一、前言前几天的项目中遇到了这个问题，点击一个按钮就添加一行，然后可以对这行数据进行操作。当然自己想到的是使用js中的innerHTML这个方法啦，但是要马

电玩女神/ 2022年07月11日 15:56/ 0 赞/ 257 阅读

相关 JS动态加载

/ loadJS:动态加载js文件---方法定义 js_path：动态加载js文件的路径 callback：加载完成后执行的回调函数 / functio

女爷i/ 2022年06月03日 00:28/ 0 赞/ 282 阅读

相关动态加载js

两种方式：第一种，通过请求添加： //动态加载脚本 function UseJs() { $.ajax(

矫情吗；*/ 2022年06月01日 01:55/ 0 赞/ 311 阅读

相关重新加载script

在web开发中，我们会莫名其妙的出现错误，明明已经引入js脚本，却运行时依然找不到js，此时可以考虑是否成功加载js，因此需要自己手动加载脚本，下边是jquery提供的方法：

骑猪看日落/ 2022年04月11日 13:39/ 0 赞/ 417 阅读

相关关于动态加载js

此话题讨论很多，解决方案也比较多。一个网页要用的js文件很多，可以一次性全部载入，也可以需要的时候分别载入。现在讨论的是通过jquery动态载入。

我会带着你远行/ 2021年11月02日 04:06/ 0 赞/ 408 阅读

相关 js动态加载js文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

た入场券/ 2021年10月24日 03:22/ 0 赞/ 469 阅读