Google Maps API v3, modulize

本來想說把之前的程式搬到 Google Maps API v3 上，但很快就發現目前 v3 的完成度還不足，所以先暫時停下來，反正也不是什麼急迫的工作。而趁目前 v3 還小而且有不同的架構，所以想來看看 maps 本身的程式。

一開始看到 maps 的主程式，會發現比起之前 v2 小了非常多 (12k / 64k)，但其實是 v3 將程式進行模組化切割並分離下載，所以事實上一個基本的地圖功能要載入的程式至少有 main.js, mod_common.js, mod_controls.js, mod_image.js, mod_mapview.js, mod_stats.js，如果用到 marker 和 infowindow 則還需要 mod_marker.js 和 mod_infowindow.js。原本把一個功能分成多次下載是不利於載入速度的，但對 javascript 而言，沒有完全載入是無法開始執行的，而且以一般使用 maps 的方式，是會使用 block loading 的來載入程式 (這裡有相關的說明)，所以縮小初始的程式碼大小是可以加快網頁其他部分的載入，而後續其他的程式部分則使用 insert javascirpt element 的方式，通常可以同步下載而不影響其他部分的顯示。main.js 中用來載入其他部分的程式類似於

function jd(a) {
  var b;
  Kc || (Kc = document.getElementsByTagName("head")[0]);
  b = Kc;
  var c = document[x]("script");
  c[fb]("type", "text/javascript");
  c[fb]("charset", "UTF-8");
  c[fb]("src", a);
  b[q](c)
 };
 function md(a) {
  eval(a)
 }
 n.__gjsload_apilite__ = md;
 var nd = "common", od = "controls", pd = "infowindow", qd = "mapview", rd = "stats";
 function sd(a) {
  var b = a[Ma]("/main.js", "");
  return function(c) {
   return b + "/mod_" + c + ".js"
  }
 }

而其他模組的程式碼則是

__gjsload_apilite__('var Le="_xdc_";function Me(a,b){n[tb](fu.....');

所以載入後會在 maps library 的匿名 scope 中 eval 其中的程式碼。非常典型的手法。

相關的討論在最近的 google io 有好幾個 session 提到，像是 Maps APIs & Mobile，PerformanceTipsGeoApiMashups，Google 在很多地方也用了類似的方式來加速，像是這裡討論的 runAsync。