深刻浅出百度地图API开发系列（3）：模块化设计

     在前面两张简单介绍了百度地图API的基础知识和使用以后，咱们来分析一下百度地图API的基本架构，了解一下基本架构能够帮助咱们更清晰的了解API的功能和调用过程，也就能够帮助咱们在实际开发中能够更方便的组织本身的代码。由于百度地图API内部有不少函数都是异步执行的，咱们你们都知道js是单线程程序，全部异步代码的执行都必须在同步代码执行以后的。因此若是咱们本身写代码进行API开发的时候，若是在同步代码中使用一些函数报错 undefined的话，颇有可能就是API内部的异步代码未执行完形成的。这样的状况，咱们也就只须要将本身的同步代码转为异步执行就能够了。

　　好的，废话很少说了，先来张图说明一下百度地图API的功能。

   

    地图展现所包含的功能就是百度地图API的一些基础功能，包括地图显示，控件，覆盖物，地图工具等这些都是靠js和html就能够实现的。好比覆盖物就是经过js生成dom元素在地图上显示的，而检索功能就必须得依赖后端的服务了，百度地图API的前端与检索功能的底层服务中间有一层phpui代理，phpui的主要做用就是接受api前端的检索请求，而后转发给底层服务返回数据，百度地图API的前端跨域请求并非以ajax的方式去请求的，而是动态生成script标签去加载的。内部会生成一个随机的回调函数传给后端，回调函数用来处理返回数据的。

　　或许这样的脑图功能点更清楚些。各位也先不要晕。这些功能后续慢慢来消化。

　　百度地图API做为一个使用量很大的前端框架，若是这些全部的代码都放在一个文件里面，呵呵，能够想象文件确定很是大，这对于前端的性能来讲简直是噩梦，因此百度地图API的设计也是模块化的，可是这种模块化和如今主流的AMD、CMD思想不同的，固然最终加载实现的原理是同样的，也是经过动态script标签去获取异步模块文件，可是百度地图API的模块化设计是09年就已经行成，而那时候AMD还不知道是什么东西，因此地图API的模块化设计没有id的概念，只有文件的概念，以文件名+MD5标识模块文件名，模块之间的依赖关系也是在编码设计的时候就已经预先定义好的，内部代码中保存有模块之间的依赖数组，加载某一模块的时候，先经过模块依赖数组得到相关的依赖模块文件，最后统一将模块名合成字符串打包加载模块文件。加载完以后进行本地localStorage存储，这样在下次获取模块文件的时候首先检查本地存储，若是有的话直接获取本地文件。这样也是减小了网络请求。

　　百度地图API的模块化是按照接口与实现分离的思想设计的，首先有一个类声明文件，类声明中预先定义了须要对外暴露的接口，可是接口的真正实现是放在异步文件中的。好比如今有一个map.js 表示map这个模块，map.js中先声明不少接口函数，可是函数体并非真正的执行代码，或只是含有一些必要的代码，保证在类实现文件未加载的时候调用接口不报错，而真正的实现文件map_Impl.js对map.js中的声明接口都进行了覆盖，因此当加载完map_Impl.js以后真正的接口实现也就覆盖了预先声明的接口。

　　之因此这样设计，也是考虑到前端的性能，由于在保证首图加载的状况下，一些不是当即须要的模块和接口是不须要首图加载的时候去执行的，这样将功能模块化。模块设计也按照接口与实现分离的方式，尽量的减小同步文件的大小。保证地图首图的加载速度。也就是所说的按需加载。

　　这样的设计其实和Google Map是一致的。固然Google一直是互联网的老大哥，好的东西固然须要借鉴了。

　　咱们来根据示例分析一下地图API的地图加载过程。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*****"></script>
<script type="text/javascript">
var mp = new BMap.Map('map_container', {
    enableHighResolution: true
});
mp.centerAndZoom('北京', 15);
mp.enableScrollWheelZoom();

</script>

　　首先加载http://api.map.baidu.com/api?v=2.0&ak=***** 获取地图引导文件。获取文件以下图：

　　经过document.write的方式加载真正的地图主文件，getscript就能够获取地图api的压缩事后的主脚本文件了。获取主文件以后，就能够调用BMap对象了，能够生成Map实例去load地图了。

　　在Map加载地图的时候实际有一些模块仍是异步获取的，利用Chrome的开发者工具抓取一下网络请求以下：

　　如上图所示，getmodules就是获取异步模块的请求，异步文件会覆盖一些主文件中类的接口方法。模块名是按照脚本文件名++文件md5加密组成，这样加md5的方式能够保证模块更新的时候加载最新的模块文件。

　　因此，综上所述，百度地图API在加载地图的过程当中，首先是api请求获取地图引导文件，而后引导文件去加载地图主文件，地图主文件有一些同步代码文件合并压缩而成，在同步文件代码执行的过程，在按需去加载异步文件。异步文件会相应覆盖一些同步文件的接口。最后获取地图瓦片图的时候也是相应的瓦片管理模块去实现最终的图片加载过程。加载过程当中还包含计算中心点，根据第一章介绍的坐标系概念计算所需的图块信息，计算过程相对比较复杂，暂不累赘。各位也只需了解地图API的加载过程便可。