iT邦幫忙

DAY 5
2

jQuery 套件開發之我可不可以跳著說系列 第 5

jQuery套件開發之(五),套件的定義。

  • 分享至 

  • xImage
  •  

--引文--
所以所以,千萬不要寫一堆function然後說在開發jquery套件阿~

<文章列表>
IT人生組文章
--9/20 : IT人的創意
http://ithelp.ithome.com.tw/question/10127866
--9/19 : 程式設計師的成就感
http://ithelp.ithome.com.tw/question/10127573
--9/18 : 你的職業是甚麼?
http://ithelp.ithome.com.tw/question/10127308
--9/17 : 寫程式的習慣
http://ithelp.ithome.com.tw/question/10127036
--9/16 : 各行各業的名人
http://ithelp.ithome.com.tw/question/10126681

開發技術組文章
--9/20 : jQuery套件開發(五),套件的定義
http://ithelp.ithome.com.tw/question/10127881
--9/19 : jQuery套件開發(四),預設值與設定值的差別
http://ithelp.ithome.com.tw/question/10127575
--9/18 : jQuery套件開發(三),true false的判斷
http://ithelp.ithome.com.tw/question/10127297
--9/17 : jQuery套件開發(二),jQuery的套件,開發前該了解的事情~
http://ithelp.ithome.com.tw/question/10127033
--9/16 : jQuery套件開發(一),三十天,我想要分享的東西
http://ithelp.ithome.com.tw/question/10126657
我覺得要寫甚麼東西之前

要先知道自己想要甚麼結果阿?

有名的作者"綠角"大大有說過一句話阿。(不負責引用)
"
如果你問我,甚麼是會開車?

那我覺得把車子平平安安開到目的地。這就是會開車了。

如果你問我,甚麼是理財?
那就是平平安安的把錢匯給本文作者...,那就是算會理財了!。
"

那要寫套件之前當然也要很甲會的針對"套件"這兩個字開出~~~範.疇.

首先官方網站就有針對套件作出解釋http://learn.jquery.com/plugins/

所以所以,千萬不要寫一堆function然後說在開發jquery套件阿~

完全就跟我一模一樣阿~簡直有了一個新名詞叫作撞笨。(笨點一樣)

簡單來說,就是開發jquery object的新方法。

接下來!我們來看看官方網站是怎麼建議咱們來寫jquery套件。

http://learn.jquery.com/plugins/basic-plugin-creation/

這!就是官方建議的"pattern"

果然是官方建議的捏~~厲害厲害~

真的沒看過這個pattern開發的套件(只是basic嘛,別這樣說)

但還是介紹一下這個pattern

(function ( $ ) {  //執行了一個立即函式,不會汙染全域變數
    $.fn.greenify = function( options ) {  //設定套件名稱
/*
$.fn.套件名稱,這樣的做法很類似javascript 針對prototype增加方法的邏輯
反正這樣用了之後,jquery物件就可以有這方法。
我們不深究裡面的程式碼
*/
      
/*          
首先要先注意extend的用法
可以參考黑暗執行緒大大的文章
 
http://blog.darkthread.net/post-2009-03-01-jquery-extend.aspx
 
總之就會merge參數物件,後面的會蓋掉前面的。
所以,以此推論,第一個參數物件你可以填上你的預設值
那你傳近來的options物件,就會針對重複的key進行覆蓋
*/
    var settings = $.extend({  
        color: "#556b2f",
        backgroundColor: "white
    }, options );
   
/*
selector裡面的集合中每一個物件進來執行下面的程式碼,並return
這個return 其實並不影響你的套件本身
但考慮到jquery的函式都可以進行鏈結
強烈建議要有return才是正確的做法
所以是this.css()這個函式執行完return了this(是一個jquery物件) 然後再被你寫的return傳出去。
有些新手會把這邊的this再用$()包起來一次,實際上是沒有必要的...
*/
    return this.css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
    });
   
 };
   
}( jQuery ));

不過,這樣的pattern有很大的問題。

如果套件裡面要做的事情很多怎麼辦?這樣一來就不能把要做的事情夾在小小的return後面了

假設我的套件是點擊了一個按鈕要出來一個小月曆怎麼辦?

下一次,我們來寫一個套件。這次除了改變一點點CSS屬性之外,還會在畫面上加一點東西。


上一篇
jQuery套件開發之(四),預設值與設定值的差別。
下一篇
jQuery套件開發之(六),對觸發套件的整個流程的小構思。
系列文
jQuery 套件開發之我可不可以跳著說26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言