From 312d3883f08c6ae3de52bb2b1add2165d16e2c06 Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Mon, 30 May 2022 00:19:41 +0800
Subject: [PATCH] =?UTF-8?q?ADD=20utils=20load=20=E5=BC=82=E6=AD=A5?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BDJS=EF=BC=8CCSS=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/load.js          |  60 ++++++++++++++++++++++
 src/views/other/loadJS.vue | 102 +++++++++++++++++++++++++++++++++++++
 2 files changed, 162 insertions(+)
 create mode 100644 src/utils/load.js
 create mode 100644 src/views/other/loadJS.vue

diff --git a/src/utils/load.js b/src/utils/load.js
new file mode 100644
index 00000000..fa3ebc21
--- /dev/null
+++ b/src/utils/load.js
@@ -0,0 +1,60 @@
+/**
+ * loadJS 异步加载远程JS
+ * @constructor
+ * @param {string} src - 必填，需要加载的URL路径
+ * @param {string} keyName - 必填，唯一key和JS返回的全局的对象名
+ * @param {string} callbackName - 非必填，如果远程JS有callback，则可更有效的判断是否完成加载
+ */
+export function loadJS (src, keyName, callbackName) {
+	return new Promise((resolve, reject) => {
+		let has = document.head.querySelector("script[loadKey="+keyName+"]")
+		if(has){
+			return resolve(window[keyName])
+		}
+		let script = document.createElement("script")
+		script.type = "text/javascript"
+		script.src = src
+		script.setAttribute("loadKey", keyName)
+		document.head.appendChild(script)
+		script.onload = () => {
+			if(callbackName){
+				window[callbackName] = () => {
+					return resolve(window[keyName])
+				}
+			}else{
+				setTimeout(()=>{
+					return resolve(window[keyName])
+				},50)
+			}
+		}
+		script.onerror = (err) => {
+			return reject(err)
+		}
+	})
+}
+
+/**
+ * loadCSS 异步加载远程css
+ * @constructor
+ * @param {string} src - 必填，需要加载的URL路径
+ * @param {string} keyName - 必填，唯一key
+ */
+export function loadCSS (src, keyName) {
+	return new Promise((resolve, reject) => {
+		let has = document.head.querySelector("link[loadKey="+keyName+"]")
+		if(has){
+			return resolve()
+		}
+		let link = document.createElement('link')
+		link.rel = "stylesheet"
+		link.href = src
+		link.setAttribute("loadKey", keyName)
+		document.head.appendChild(link)
+		link.onload = () => {
+			return resolve()
+		}
+		link.onerror = (err) => {
+			return reject(err)
+		}
+	})
+}
diff --git a/src/views/other/loadJS.vue b/src/views/other/loadJS.vue
new file mode 100644
index 00000000..8ebe4c31
--- /dev/null
+++ b/src/views/other/loadJS.vue
@@ -0,0 +1,102 @@
+<template>
+	<el-container>
+		<el-aside style="padding:15px;width: 400px;">
+			<el-card shadow="never" header="异步加载JS">
+				<div style="line-height: 1.5;font-size: 13px;">
+					<p>演示了使用 @/utils/load 加载百度地图的JSAPI和它的GL库BMapGLLib</p>
+					<p>当然也可以像传统网页一样加载任何JS和CSS，甚至可以是JQ。</p>
+					<br/>
+					<el-alert title="这是一项试验工具, 具有不稳定性" type="warning" show-icon :closable="false"/>
+				</div>
+			</el-card>
+		</el-aside>
+		<el-main class="nopadding">
+			<div style="width: 100%;height: 100%;" id="container"></div>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import { loadJS } from '@/utils/load'
+
+	export default {
+		name: 'loadJS',
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			async init(){
+				var ak = "vxSbZuydZ42ktZCvXvy5xCai28OEVqUq"
+				//loadJS (src, keyName, callbackName)
+				//src 			必填，需要加载的URL路径
+				//keyName 		必填，有2个作用，作为唯一KEY防止N次插入DOM；作为JS返回对象的key名，类似百度地图的BMapGL，如果没有则返回null
+				//callbackName 	非必填，如果远程JS有callback，填写callback方法名称。
+				//loadJS返回Promise，如果全局对象eslint发出警告 需要//eslint-disable-next-line，暂时关闭警告行
+				//																							╭───这两个字符串要一致───╮
+				var BMapGL = await loadJS(`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&callback=BMapGLinit`, "BMapGL", "BMapGLinit")
+				//像BMapGLLib就没有callback，无需第3个参数
+				var BMapGLLib = await loadJS("//api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js", "BMapGLLib")
+
+
+				var map = new BMapGL.Map('container')
+				map.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 20);
+				map.enableScrollWheelZoom()
+				map.setTilt(55)
+				map.setDisplayOptions({
+					poiText: false,
+					poiIcon: false
+				})
+
+				var path = [{
+					'lng': 116.297611,
+					'lat': 40.047363
+				}, {
+					'lng': 116.302839,
+					'lat': 40.048219
+				}, {
+					'lng': 116.308301,
+					'lat': 40.050566
+				}, {
+					'lng': 116.305732,
+					'lat': 40.054957
+				}, {
+					'lng': 116.304754,
+					'lat': 40.057953
+				}, {
+					'lng': 116.306487,
+					'lat': 40.058312
+				}, {
+					'lng': 116.307223,
+					'lat': 40.056379
+				}];
+				var point = [];
+				for (var i = 0; i < path.length; i++) {
+					point.push(new BMapGL.Point(path[i].lng, path[i].lat));
+				}
+				var pl = new BMapGL.Polyline(point, {
+					strokeColor: "blue",
+					strokeWeight: 10,
+					strokeOpacity: 0.5
+				});
+				map.addOverlay(pl);
+				var lushu = new BMapGLLib.LuShu(map, pl.getPath(), {
+					autoCenter: true,
+					icon  : new BMapGL.Icon('img/logo.png', new BMapGL.Size(30,30)),
+					speed: 30,
+					enableRotation: true
+				});
+				setTimeout(()=>{
+					lushu.start()
+				},1000)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>