作家
字體：小 中 大 |
|
|
|
| 2015/01/07 17:10:35瀏覽412｜回應0｜推薦2 | |
| 雖然B.K.使用jQuery好一段時間了，但是對於使用它的心得，一直沒有用心把它記錄起來。 今天做了一個小小的決定，要把B.K.常用到的一些方法做一些document。 關於jQuery第一發文章，就決定是如何自己寫一個Plugin。 要寫Plugin之前，要先想一想它所需要的情境。 這邊設定的情節是 主體是DIV 需要一些可改變CSS的設定選項 還有這個DIV可以有的Method，這邊先定一個可以改變大小，一個可以偵測Click。 情節Ready囉，那就著手開始吧。 其實寫Plugin有很多的教學了，但B.K.一開始就採用把Plugin保護起來的方法來實作，這「保護」兩個字，是jQuery官網所建議的寫法，其目的在確保不與其它的Javascript Libraries所使用的$混淆。這個寫法的樣子大概長成像下面的語法一樣。 (function ( $ ) { ...... }( jQuery )); 那，就開始第一個Plugin的範例說明囉。 B.K.先定義了一個叫defaults的設定值，這裡去記錄DIV需要的字型顏色及背景色。 再來定義了方法的集合，使用了methods來設定所需的函式有那些，以本範例來說有init、emphasis及click三個函式。 例子中還有一個setCss的函數，這個是獨立出來讓這個Plugin的所有方法可以去重用的函數。 最後就去實作一個叫myFirstPlugin的Plugin；這邊就各位聚焦一下 $.fn.myFirstPlugin = function(methods_key) { ...... } 這個段落，裡面的對應在參照Methods中的函式，讓各個DIV去套用這個Plugin時，應該有什麼行為或結果。 這樣就完成了一個比較完整(有參數及方法的結構)的Plugin。 使用的方法就像下方的語法 $(function() { $('#div1').myFirstPlugin(); $('#div2').myFirstPlugin({'backgroundcolor':'green','color':'white'}); $('#div3').myFirstPlugin("emphasis",{'backgroundcolor':'blue','color':'red'}); $('#div4').myFirstPlugin("click",{'backgroundcolor':'yellow','color':'blue'}); }); div1實作init的方法、黑色的字體、背景色為灰色。 div2實作init的方法，但套用了綠色的字體、背景色為白色。 div3實作emphasis的方法(有放大及粗體)、紅色的字體、背景色為藍色。 div4實作click的方法、藍色的字體、背景色為黃色。當這個div被點擊時會有alert觸發。 這個範例B.K.沒有將Plugin的部份抽成另一個js檔，各位可以將完成的程式碼包成一個js檔，一般建議會命名成jquery.xxx-yyy.js，其中xxx為plugin的名稱，yyy為版本。以本例來說Plugin的js檔可以取成jquery.myFirstPlugin-001.js。若您無須版本的控制yyy是可以省略的。 這樣就完成了第一個Plugin的實作囉。 感謝各位看倌。 |
|
| ( 知識學習｜隨堂筆記 ) |
