簡單介紹一下怎麼寫一個新的「以 jQuery 為基礎的函式」。
jQuery 雖然已經提供了很多函式可以使用，但也許你還想設計出 jQuery 尚未提供的功能（或是寫一個 jQuery plugin），那就要瞭解怎麼擴充 jQuery，這篇文章將會介紹一個簡單例子來說明如何擴充 jQuery，這個例子是會把指定的網頁元件顯示出 Google Maps 以及對它的操作。
先寫出整個網頁 HTML 的原始碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 引入 jQuery 的 js 檔案 --> <script type="text/javascript" src="jquery.min.js"></script> <!-- 這裡加入 Google Maps API 所需要的 js 檔案 請參考 http://code.google.com/apis/maps/signup.html --> <!-- 擴充的內容寫在 jqmap.js 檔案中 --> <script type="text/javascript" src="jqmap.js"></script> <!-- 這一頁的 JavaScript 寫在 mymap.js 檔案裡 --> <script type="text/javascript" src="mymap.js"></script> </head> <body> <!-- 等一下地圖會顯示在這裡 --> <div id="gmap"></div> </body> </html>
簡單說明一下這個 HTML 的結構，必要的 jQuery JS 檔案是一定要引入的；而要使用到 Google Maps API 的話，要去官網註冊一個 API Key，然後參考它的說明加入 Google Maps API 所需要的 JS 檔案；然後，我們把擴充的內容寫在 jqmap.js 檔案裡，mymap.js 檔案裡則是這一頁主要執行的 JS 原始碼。而 HTML 的 body 裡只有一個 div，等一下要讓 Google Maps 顯示在這裡。
如同 jQuery 其它的函式，我希望等一下能用 $('#gmap').gmaps(); 來完成顯示的動作，所以我在 mymap.js 裡先寫成這樣：
/* 相當於 body onload 之後呼叫 */ $(function(){ // 先設定 div 的大小 $('#gmap').css({ width: '500px', height: '375px' }); // 產生並顯示 Google Maps var gmap = $('#gmap').gmaps(); ... });
當然，現在還不會有什麼效果，還是要去 jqmap.js 裡實作出 $().gmaps() 這個函式，所以我們先在 jqmap.js 裡的檔案先完成這件事：
(function($){ $.fn.extend({ gmaps: function(options) { var o = jQuery.extend({ center: [25.02359, 121.52808], zoom: 15 }, options); $(document).unload(function(){GUnload();}); return this.each(function(){ this.gMap = new GMap2(this); this.gMap.setCenter(new GLatLng(o.center[0], o.center[1]), o.zoom); }); }, }); })(jQuery);
首先，(function(){ ... })(); 把所有的 code 包起來，這樣的作法是確保你裡面寫的 code 不會成為全域變數，而在此例中我加入寫成 (function($){ .... })(jQuery); 表示我將 $ 定義成 jQuery 物件，好讓這個 function 中可以直接使用 $ 不造成混淆，很多 jQuery plugin 都會用這個方式包裝起來。
接著，$.fn.extend({ ... }) 是為了擴充 jQuery.fn 這個物件，為了讓我們之後定義的函式會跟原本 jQuery 提供的函式有相同的結構，所以擴充的內容會寫在 $.fn.extend({ ... }) 之中。
很快地，就來到定義 gmaps() 的部份，我們定義 gmaps 是一個函式，並且可以傳入一個參數當作 options，而下面用到 jQuery.extend( ... ) 的部份則是設定 options 的預設值，簡單地說，如果使用時有傳入 options 則用傳入的，否則就使用預設值。
接下來，就是直接使用 Google Maps API 了，而我把建立好的 GMap2 物件存放在 this.gMap 裡面。（會用 this.each 是因為 jQuery selector 可能會一次 select 很多個網頁元件，雖然實務上可能不會一次用很多 Google Maps，不過寫法上還是按照慣用(?)的模式來）
另外就是遵照 Google Maps API 的建議，在 unload 的時候呼叫 GUnload 以避免瀏覽器 memory leak。
如此一來，你應該可以看到頁面上出現一個 500×375 大小的 Google Maps 了（預設的座標是台北市中正區一帶）
如果要再寫一個可以在這地圖上加入指標的函式，那在 jqmap.js 裡可以寫成：
(function($){ $.fn.extend({ gmaps: function(options) { ... }, addGMarker: function(lat, lng) { this.marker = new GMarker(new GLatLng(lat, lng)); return this[0].gMap.addOverlay(this.marker); } }); })(jQuery);
很簡單地加上一個 addGMarker 函式，並且帶入經緯度座標值為參數，好在剛才產生的 maps 上加入一個 marker 的 overlay。
如此一來，便能夠在 mymap.js 裡使用 $('#gmap').addGMarker(xxxx, xxxx) 來加入 marker 了。
看吧，擴充 jQuery 也是很簡單的。
文章分類: 
標籤: 
