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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM