SPA单页面应用中外部js依赖动态全局变量的问题

[TOC]

在写web页面时我们经常会遇到外部引入的 js 资源依赖于我们提前设置的一些全局变量的场景，如下面这种情况：

## 使用场景
```html
<html>
<head>
<script>
var config = {
	app: 'jikemaimai.com'
	// ...
}
</script>
<script src='http://jikemaimai.com/show-web-app-name.js'></script>
</head>
</html>
```

```js
// show-web-app-name.js
console.log(window.config.app)
```
这里外部的js文件要使用到全局设置的 `config.app` 变量，这种场景很容易在 `WEB2` 系统中写出，因为所有的引入排版在服务端就可以动态生成。但在诸如VUE，REACT 这种 SPA 框架中并不适合这样写，因为他们的html只有一个，我们处于某些原因如全局变量是动态的值，或者或这种要`引入scrpit(特别是第三方这种不可改动的js资源)之前就必须先设置一个全局变量`不方便将script资源提前写入到入口模版文件 html 中。我们就可以使用下面这种动态引入 script 资源的方法：

## 使用原理
在JavaScript中，可以使用document.createElement()方法创建一个script元素，并将其添加到DOM中以动态地引入外部脚本。以下是在引入成功后执行后续处理的示例代码：

```javascript
// 创建一个新的script元素
var script = document.createElement("script");

// 设置脚本的src属性
script.src = "https://example.com/external-script.js";

// 添加加载完成后的回调函数
script.onload = function() {
  // 在这里编写在外部脚本加载完成后要执行的代码
  console.log("外部脚本加载完成！");
};

// 将脚本元素添加到文档中
document.head.appendChild(script);
```

在上面的示例中，我们创建了一个新的script元素，设置了它的src属性以指向外部脚本的URL，然后添加了一个onload事件处理程序，以便在脚本加载完成后执行相应的操作。最后，我们将该script元素添加到文档的head部分中。

当外部脚本加载完成后，onload事件处理程序将被触发，可以在其中编写需要在外部脚本加载完成后执行的代码。

## 例：在 vue 中使用
```js
// VUE
export default {
	data() {
		return {
			appInfo: {
				app: 'jikemaimai.com',
				token: ''
			}
		}
	},
	mounted() {
		this.login()
	},
	methods: {
		async login() {
			/**
			* 省略假如这里是登录获取 token 的操作
			* this.appInfo.token = await login()
			**/
			window.appInfo = this.appInfo
			this.loadScript(() => {
				console.log('load script success!')
			}）
		},
		loadScript(callback) {
			// 创建一个新的script元素
			var script = document.createElement("script");

// 设置脚本的src属性, 该文件需要 window.appInfo 变量
			script.src = "http://jikemaimai.com/external-script.js";

// 添加加载完成后的回调函数
			script.onload = function() {
				// 在这里编写在外部脚本加载完成后要执行的代码
				console.log("外部脚本加载完成！");
				callback()
			};

// 将脚本元素添加到文档中
			document.head.appendChild(script);
		}
	}
}
```

示例中，我们引入的外部文件 `http://jikemaimai/external-script.js` 依赖外部全局变量 `window.appInfo` 在我们在引入之前已经注册好了，然后再动态引入外部js文件并通过传入一个 `callback` 回调，以便后续处理。这样就`解决了在SPA单页面应用中外部js依赖动态全局变量的问题`。

【END】