iT邦幫忙

DAY 2
4

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

jQuery的套件,開發前該了解的事情~

  • 分享至 

  • xImage
  •  

我以前寫套件,方法、用法都是自己亂開。
但是這樣的東西根本跟人家的差很多。
基本上人家怎麼寫還是有一些用意在的。
讓我們觀察一下別人的套件吧~
套件的使用,要開出怎樣的spec才最IN

可別小看這個標題
這個標題可是包含多種行銷手法、吸引多樣客群
首先套件這兩個字可是技術宅的關鍵字。
“甚麼!有套件!?"求知若渴的技術宅可是難以抵擋的阿!
SPEC四個英文字,嘿嘿更是可怖阿!一次吸引想學英文的人跟英文很好想指正的人
最後,"才最IN"!吸引了一群已經軟掉的中年人點進來看撇步阿!!
( 這一段,純粹湊字數。 )

(回到地球上)我們來看一下人家的套件是怎麼使用的?

首先先看一下jquery ui 的dialog好了。

我以前常用的方式…

// –1–
  $( “#dialog" ).dialog();
// –2–
  $( “#dialog" ).dialog({
    autoOpen: false,
    show: {
      effect: “blind",
      duration: 1000
    },
  });
// –3–
  $( “#dialog" ).dialog( “open" );

分析這三類(暫稱做操作法),發生的行為是
1.依照預設參數執行套件
2.改變參數執行套件
3.觸發套件事件

這時候有點值得深入,我在文件中有看過這一頁
http://api.jqueryui.com/dialog/

Options是我們所指的參數,基本上,是可以的。
但,Events 跟 Methods差別在哪裡呢?
( 這邊純屬個人理解,有更好的解釋請路口叫計程車 )
Methods 方法,就是這個套件可以發動的程序。
Events 算是,這個套件的會觸發的階段。
所以通常會伴隨著一個callback,意即到了甚麼階段,我們去執行callback
所以一個dialog可以執行"關閉"這個Methods:

$( “.selector" ).dialog( “close" );

也可以綁定事件callback:

  $( “.selector" ).on( “dialogclose", function( event, ui ) {} );

於是我們回到剛剛的操作面上
發現我們已經知道
$( “.selector" ).dialog( “close" );這個,是操作方法。
而Options跟Events就相當神似了。

$( “#dialog-form" ).dialog({
  autoOpen: false,
  height: 300,
  width: 350,
  modal: true,
  close: function() {
    allFields.val( “" ).removeClass( “ui-state-error" );
  }
});

藉由值是否是一個function,我們了解了Options與Events的分野
這時候當我們回頭再看看操作三法,是不是有不一樣感受了呢?
最後,由於Methods也是有可能參數的。
所以我們在開發套件時,也要考慮Methods帶參數的情形

$( “#dialog" ).dialog( “open", 5000 ); //五秒後打開
$( “#dialog" ).dialog( “open",
{
    effect: ‘pop’
  , delay: 5000
} );

今天就這樣吧,期待明天與大家見面。


上一篇
三十天,我想要分享的東西
下一篇
jQuery套件開發之(三),true false的判斷
系列文
jQuery 套件開發之我可不可以跳著說26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
小內 Caz
iT邦新手 4 級 ‧ 2013-09-28 23:26:01

我只會套一些JQuery效果...很多細部的部分都不太清楚T_T
大大有什麼建議可以讓小妹,學習的方式XD

@@ 學習的方式喔...
感覺自己學得很沒效率耶
jQuery學到專精其實真的很困難
因為你真的要對JS要深刻的認識才有辦法
現階段就是,單純一點
每次用到一個jQuery函式,就到"官方網站",查"定義"
覺得這個訣竅是唯一我可以有信心對你說的

我要留言

立即登入留言