Pages

2016-06-01

製作自己的jQuery Plugin套件

在Web設計的事件點擊(Event Handler)裏,使用link會比button更好用,因為它有hover事件,要用css換底圖都方便。

LinkButton UI

簡單的Design Pattern就是以下的範例,透過jQuery讀取id作switch判斷。

LinkButton Switch

優質的LinkButton,還要避免短時間雙擊(double click)的問題,這可以透過在click()事件前後埋入data-clicked+setTimeout()來判斷短時間點擊。另外也要避免URL#的問題,這只要記得傳回event.preventDefault()及return false即可。

總是有一些小細節要處理,而且又要重複使用,最好的作法就是包裝成jQuery Plugin。官方的Plugin教學比較陽春一點,此篇中文框架教學比較平易近人,文中不懂的關鍵字查GOOGLE就會有衍生的教學。

比較好的jQuery Plugin框架,應該是要能傳入options設定值,而且也能獨立呼叫裏面的methods才對。例如

LinkButton Init

建立jQuery Plugin的思路及方法,可以閱讀這篇文章,作者使用plugin prototype來擴增方法,不過它比較不好理解,我會建議觀看jQuery EasyUI LinkButton 的Plugin框架來寫作比較好理解(請自行下載查看其SRC源碼)。雖然EasyUI是一個重度自生html的套件,裏頭寫得很複雜,不過它的Plugin建構式架構是挺好的學習參考,用來實作自己的Plugin很棒。

為了促進對它的Plugin框架初始化的理解,我把它抽取出來去掉不必要的東西,整理如下圖。若你看不懂它在寫什麼,可能是對jQuery API還不甚熟悉,那就先仿照其他別的Plugin框架來實作也是可以的。

LinkButton Framework

最後值得一提的是,包裝jQuery Plugin要注意this的問題,除了$.fn.XXX()這個函式的this是指向jQuery物件外,其餘大部分的this都是指DOM物件。因為DOM物件是JS標準,所以要用它來作內部函式及外部的參數傳延溝通,而不是用jQuery Object來便宜行事.

No comments: