百度地图的模块化加载方案

百度地图的加载方式比较奇葩，比如百度提供的一个 js 脚本地址是这样http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM，直接使用浏览器访问，这个文件的内容是这样：

(function () {    window.BMap_loadScriptTime = (new Date).getTime();    document.write('<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://api.map.baidu.com/getscript?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM&services=&t=20160503160001"></script>');
})();

百度地图通过一个脚本再去请求另外一个脚本，这样的方式可能是我见的少吧，感觉这样会比较安全。
在直接访问后面这个网址，得到的就是真正的百度地图api文件了。

看起来好像直接转成 requirejs 加载的方式没有问题，那就试试？

// requirejs 的配置，因为百度地图是非AMD模式的，所以需要加上shim进行转换require.config({
    paths: {        'BMap': ['http://api.map.baidu.com/api?v=2.0&ak=mXijumfojHnAaN2VxpBGoqHM'],
    },
    shim: {        'BMap': {
            deps: ['jquery'],            exports: 'BMap'
        }
    }
});

// 调用百度地图define(['jquery','BMap'], function(){    var map = new BMap.Map("map");
});

来了来了，控制台非常精准的出现了错误：

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

ReferenceError: BMap is not defined(…)

define

Uncaught ReferenceError: BMap is not defined

第一个和第四个是控制台打印出来的错误信息，中间两个是 requirejs 打印出来的错误信息。其中第一个错误只是黄色的感叹号（因为当前请求的文件已经加载，大概是提醒你异步加载的文件是不能再请求脚本的）；最后一个错误是红色的叉，因为这里找不到BMap这个对象。

好了，大概问题知道了。如何解决？

经过大量的查找，发现 requirejs 有async这样一个插件，附上 requirejs 插件列表：https://github.com/requirejs/requirejs/wiki/Plugins
这个插件可以使当前加载的 js 脚本采用异步的方式加载更多的脚本文件，官方原话是这样的：

async : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).

所以配置好 async.js

require.config({    paths: {        'async': '../../lib/require/async'
    }
}

调用百度地图的时候这样写：

// 调用百度地图define(['jquery','async!BMap'], function(){    var map = new BMap.Map("map");
});

这样就能成功的使用模块化的技术调用百度地图了

作者：lancelot_lewis
链接：https://www.jianshu.com/p/c579c4b51bc5