返回列表 發帖

Google AJAX Libraries API - 公開的 JavaScript Library 儲存庫

去年曾經介紹過另一個公開的 JavaScript Library 儲存庫:cachefile.net,本站的範例區也用了不少該站所提供的資源,包括 JavaScript 及小圖示。而這次要介紹的這個儲存庫也是相當令人期待,因為是 Google 所提供的,相信穩定性和速度上都有更好的表現。

Google AJAX Libraries API 簡單的來說呢,就是 Google 透過他們的主機來提供你 JavaScript Library (或是 AJAX Library) 的檔案,最直接的好處之一就是,當網站的使用者瀏覽到的不同網站是採用 Google 所提供的檔案,就不需要再重複下載。舉例來說,很多網站都使用了 jQuery,如果檔案都是放在各個網站,當使用者瀏覽時,雖然都是相同的檔案,還是必須要個別重新下載。如果這些網站都改採用 Google 所提供的 jQuery,則使用者第一次瀏覽到某個網站時,會下載並且 cache 在電腦內,當使用者去到另一個網站也是使用到 Google 所提供的 jQuery,則不需要再重複下載。換言之就是可以加快網頁的呈現速度,這就是公開的檔案儲存庫的優點之一。

當然 Google 所提供的不只這樣,以下來看看 Google AJAX Libraries API 的優點:

  • Cache - 已針對主機做了正確的設定,下載過一次之後,檔案會 Cache 在使用者的電腦
  • Gzip - 如果使用者的瀏覽器支援 Gzip 壓縮,則 Google 就會送出壓縮過的資料,減少傳輸量
  • 有提供最小化的版本,也就是 JavaScript 內的空白、換行、程式變數都經過處理,讓檔案最小化
  • Google 有自家的 CDN (內容散佈網路),會由最接近使用者的主機送出檔案,讓傳輸速度加快
  • 主機都很快
  • 使用者在不同網站之間瀏覽也不需重複下載相同的檔案
  • 傳送檔案時不會傳送多餘的 header 資訊,例如 cookie,這樣可以減少傳輸量,省下珍貴的頻寬


那麼既然是提供檔案儲存的空間,為甚麼不是叫做 Google AJAX Libraries Storage,而是叫做 Google AJAX Libraries API 呢?

事實上,Google 確實是透過一個簡單的 API 來提供檔案的,而這個 API 目前最主要的目的是讓你可以輕易地選擇你要使用的檔案版本,例如某個特定的版本或者是最新的版本。使用方式有兩種,比較直覺的方式是直接指定完整路徑的引用,原本使用自己主機上的檔案改成為 Google 所提供的檔案,例如我要 jQuery 1.2.6 的版本,就這樣引用:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
第二種方式是使用 Google AJAX API Loader 的 google.load() 來把檔案讀進來,以下這個範例是使用 google.load() 來載入 jQuery 並且在網頁載入完成後使用 jQuery 的 get() 讀取遠端的檔案:
<script src="http://www.google.com/jsapi"></script>
<script>
  // 載入 jQuery
  google.load("jquery", "1");

  // 網頁載入完成後,使用 jQuery 函數
  google.setOnLoadCallback(function() {
    $.get("http://jsgears.com/index.php",
      function (data) {
        // 處理取得的 data 
      });
    });
</script>
google.load() 的第一個參數是 library 的名稱,目前支援的 libraries 包含了:
  • jquery
  • prototype
  • scriptaculous
  • mootools
  • dojo


第二參數則是指定版本,版本的指定方式很靈活,假設版本有 1.8.2、1.8.4 以及 1.9.1 三種,你可以指定 1.8.2 明確地表示要使用 1.8.2 這個版本,也可以指定 1.8 表示要使用 1.8.x 的最新版,也就是 1.8.4,甚至你也可以指定 1 表示使用 1.x 的最新版,即為 1.9.1。這種版本的指定方式也適用於指定完整路徑的引用方式,例如:
<!-- 版本只給 1 表示使用 1.x 的最新版 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
此外,預設送出來的檔案都是最小化的版本,如果你需要原始編排整齊可讀的程式碼,可以這樣做:
google.load("jquery", "1.2", {uncompressed:true});
目前 Google AJAX Libraries API 所提供的檔案相對的是比較少,但是速度和穩定性卻是相對的比較高,未來可預期的是還會有更多的 library 加入到 Google AJAX Libraries,這對網站開發者而言應該是個好消息。對於 Google 這樣的美意,大家不妨善加利用~

PS1. 完整的文件:http://code.google.com/apis/ajaxlibs/documentation/
PS2. 目前 AOL 也有提供 Dojo,在這裡:http://dev.aol.com/dojo
PS3. Yahoo 也用自家的 CDN 提供 YUI,在這裡:http://developer.yahoo.com/yui/articles/hosting/
To infinity and beyond!

現在又多了 SWFObject 和 YUI 可以用囉!

http://code.google.com/apis/ajax ... ndex.html#swfobject
To infinity and beyond!

TOP

jQuery UI 也可以透過 Google AJAX Libraries API 來使用囉。

目前版本: 1.5.2

透過 loader 的語法(記得先把 jquery 給 load 進來) :
google.load("jquery", "1.2");
google.load("jqueryui", "1.5.2"); 
直接引用的路徑(同樣先引用 jquery):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
To infinity and beyond!

TOP

返回列表 回復 發帖