vuecli3 引入script 针对没有cmd amd require等方式的js
最近做高德开发,需要引入高德的js,但是 说实话 高德官方的文档不知道大佬们有没有看懂,反正我是没看懂,写的都什么鬼?我怎么引都引入不了,迫不得已想到了如下方法:
一、准备一个能够在页面中插入js的方法
export default function remoteLoad (url, hasCallback) {
return createScript(url)
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript (url) {
var scriptElement = document.createElement('script')
document.body.appendChild(scriptElement)
var promise = new Promise((resolve, reject) => {
scriptElement.addEventListener('load', e => {
removeScript(scriptElement)
if (!hasCallback) {
resolve(e)
}
}, false)
scriptElement.addEventListener('error', e => {
removeScript(scriptElement)
reject(e)
}, false)
if (hasCallback) {
window.____callback____ = function () {
resolve()
window.____callback____ = null
}
}
})
if (hasCallback) {
url += '&callback=____callback____'
}
scriptElement.src = url
return promise
}
/**
* 移除script标签
* @param scriptElement script dom
*/
function removeScript (scriptElement) {
document.body.removeChild(scriptElement)
}
}
针对所有问题,将该文件放置于utils文件夹下
使用方法
目标页面:
import remoteLoad from "@/utils/remoteLoad.js";
async created() {
// 已载入高德地图API,则直接初始化地图
// console.log(this.AMap,window.AMap)
if (window.AMap && this.AMap){ this.initMap();
// 未载入高德地图API,则先载入API再初始化
} else { await remoteLoad(
`https://webapi.amap.com/maps?v=1.4.10&key=${MapKey}&plugin=AMap.DistrictSearch`
);
await remoteLoad('https://a.amap.com/jsapi_demos/static/citys.js')
this.initMap();
}
至此已经做到引入js并且初始化地图。具体想封装成组件还是直接在页面使用都是可以的,而且只加载一次,避免了反复引入的问题,感谢大佬观看
vuecli3 引入script 针对没有cmd amd require等方式的js的更多相关文章
- AMD and CMD are dead之KMD.js版本0.0.2发布
更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debu ...
- js模块定义——支持CMD&AMD&直接加载
/* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...
- cmd,amd,umd 模块写法
mark一篇感觉写的不错的cmd/amd/umd的模块写法 原文:https://github.com/banricho/webLog/issues/12 umd通用写法: // jQuery 2.2 ...
- vue - public 引入 <script>报错 Uncaught SyntaxError: Unexpected token '<'
1.现象 原本我是直接在母版引入 <script type="application/javascript" src="static/config.js" ...
- 【JSP中引入文件】JSP中获取根路径+引用js文件
在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: inde ...
- 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js
问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...
- common js CMD/AMD 是什么 和他们之间的联系区别
知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念.想必这就是许多新手刚接 ...
- 31、vue-cli3引入封装svg图标
svg图标放大不失真,png会出现失真现象. 一.方法一 1.在对应vue项目里添加插件 vue add svg-sprite 输入 Y 2.在执行 npm install svgo svgo-loa ...
- CMD/AMD
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues ...
随机推荐
- jenkin环境搭建
Jenkins是一个用Java编写的开源的持续集成(CI)工具,可持续.自动地构建/测试软件项目,监控一些定时执行的任务.具有开源,支持多平台和插件扩展,安装简单,界面化管理等特点. 1.下载并解 ...
- Kotlin语言Web库又添一虎将:Kweb
Kweb是一个库,您可以利用它使用Kotlin编程语言轻松构建Web应用程序.从程序员的角度来看,它基本上消除了浏览器和服务器之间的分离.这意味着只操纵DOM的事件不需要进行服务器往返.由于Kweb是 ...
- bzoj1652 / P2858 [USACO06FEB]奶牛零食Treats for the Cows
P2858 [USACO06FEB]奶牛零食Treats for the Cows 区间dp 设$f[l][r]$为取区间$[l,r]$的最优解,蓝后倒着推 $f[l][r]=max(f[l+1][r ...
- python_实现发送邮件功能
#!/usr/bin/env python #-*- coding:utf-8 -*- from email import encoders from email.header import Head ...
- Java8新特性:Function接口和Lambda表达式参考
Lambda基本:https://blog.csdn.net/wargon/article/details/80656575 https://www.cnblogs.com/hyyq/p/742566 ...
- 【转载】Multiboot规范
转自:Multiboot规范 Multiboot规范 本文定义了Multiboot规范--提议中的引导过程标准.本文是此规范的0.6.93版. Multiboot规范简介 本章描述了一些关于Multi ...
- python渗透测试工具集合
作者:一起学习Python 原文链接:https://zhuanlan.zhihu.com/p/21803985 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 在进行漏洞研究. ...
- lncRNA研究利器之"TANRIC"
http://bioinformatics.mdanderson.org/main/Main_Page http://ibl.mdanderson.org/tanric/_design/basic/i ...
- 日志_测试代码_Qt532
1. int LogFile(QString &_str) { QDateTime datetime = QDateTime::currentDateTime();//获取系统现在的时间 QS ...
- Tomcat启动之异常java.lang.IllegalStateException
严重: Exception sending context destroyed event to listener instance of class org.springframework.web. ...