深刻淺出百度地圖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的加載過程便可。