高德地图 JS API Loader

[ly525]

以高德地图为例，在开始接触百度地图/高德地图的时候，多数写法是这样的：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"></script>

我们习惯了使用npm 包的形式来安装一些三方依赖，比如echarts，npm install echarts，
后面高德也提供NPM 安装 Loader的方式，来引入高德地图。

npm i @amap/amap-jsapi-loader --save

最近有涉及腾讯地图的需求，于是简单调研了下，发现腾讯地图官方没有提供 npm 包的安装方式，只能通过 script 标签来引入腾讯地图（这样不好的地方：不方便做按需引用，很多时候是直接添加到 index.html 的，这样会导致无意义的资源加载、引发非强依赖引发的失败故障)

于是简单调研了下 @amap/amap-jsapi-loader) 其代码

发现amap-jsapi-loader 其实本质上也是通过 document.createElement('script').src + Promise 的形式来加载高德地图script，返回 script执行后挂载在window上的 window.AMap

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值&callback=__init"></script>

地图的 script 一般都会有一个 callback，这个callback 其实也一个在没有Promise的情况下，对 Promise.resolve 非常好的一个补充，是一个非常好的巧思👍

这里有比较有意思的地方，高德地图有其插件机制，其加载机制是 Amap主JS、插件JS 都会去加载，等到主JS和插件JS加载完成后，会通过 promise.resolve返回