什麼是 Google Libraries API？

以前在寫網頁時，如果要用到 jQuery 或者 jQuery ui，就很自然的連到 jQuery 官網下載最新版本的 jQuery，然後將 jquery-xxx.min.js 放到 project 裡，最後在網頁裡加上下面的程式就完工了。

<script type="text/javascript" src="js/jquery-xxx.min.js"></script>

今天起，有更簡單的方法了。

不用再去下載 jQuery，project 裡也不用放 jquery.js，只要在程式裡加上下面的程式就可以了。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

這樣做除了步驟變簡單，還有什麼好處呢？


首先是節省頻寬，當網站很熱門時， 這小小幾十 kb 的頻寬也是有點幫助的。

再來是 jQuery 推出新版本時，以往的作法得整個流程跑一次，還得刪除舊的 jquery.js，新的作法只要修改 url 裡的版本編號就可以了，當然得確定 Google 已經 host 這個新版本的 source 了。

最後是節省硬碟空間，這幾十 kb 對現在的的硬碟空間當然不值一曬，但是當幾百萬個網站都這麼做時，就有差別了。

當然，如果需要客制 jQuery，那就沒辦法這麼用了。

事情就這樣結束了嗎？不，沒那麼簡單。

假設第一個網頁用到 jQuery 和 Google map，第二個網頁用到 jQuery 和 jQuery-ui，那兩個網頁的 <script /> 就有不同的設定，但是現在的 web 開發都會將 page header 獨立成一個檔案來共用，所以導致這兩個頁面都得使用聯集的結果，也就是都得載入 這三個 js 檔，這種情況在用到的 js 檔愈多時會愈加嚴重。

所以如果可以動態載入所需的 js 檔，不是很好嗎？那就是 google.load() 上場的時候了。

首先在 page header 這個共用檔案裡加上以下的程式：

<script type="text/javascript" src="https://www.google.com/jsapi?key=YOUR-API-KEY"></script>

記得得去 Google 註冊你的網址專屬的 API Key。

接下來在上述第一個網頁裡，使用以下的程式就可以了。

<script type="text/javascript">
google.load('jquery', 1.8.1);
google.load('maps', 2);
google.setOnLoadCallback(function(){
    // init code...
});
</script>

呼叫 google.load() 時，才會載入指定版本的 javascript library。

因為是動態載入，所以無法確定載入完成的時間，因此得用 google.setOnLoadCallback() 來執行 javascript library 載入完成後要執行的程式，以防止在 jquery 尚未載入完成就呼叫 jquery 導致出錯。

Google host 別人家的 Javascript libraries 請看這邊。
Google host 自家的 Javascript libraries 請看這邊。