iT邦幫忙

DAY 6
2

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

jQuery套件開發之(六),對觸發套件的整個流程的小構思。

  • 分享至 

  • xImage
  •  

如果你的套件是邊寫邊想

那當然裡面就有很多粗枝濫造的判斷了

最好一開始就訂好範疇阿。

也最好一開始就知道你的套件是怎麼被觸發的

然後會發生甚麼事

綁定那些事件。

最後會有那些用法、傳那些參數~

<文章列表>
IT人生組文章
--9/21 : IT人的人生觀
http://ithelp.ithome.com.tw/question/10128168
--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/21 : jQuery套件開發(六),套件的整個流程的小構思。
http://ithelp.ithome.com.tw/question/10128176
--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

全列表
http://ithelp.ithome.com.tw/ironman6/player/sheephead081/alll/1
大家好!
假如我們把作豆干的方法簡化
那就是把去巷口買~(喂!)
同理,我們把寫套件的方法簡化
就是去google一個人家寫好的!

等下,我這樣有點寫不下去。

—分隔線—

套件基本上會針對一些元素進行事件的綁定,當然最常見的就是click了
點擊之後就進行邏輯計算、畫面改變。
所以 今天! 我們把這幾個需求按照時間順序稍作整理。

第一個,套件初始化。( 初始化 )
第二個,套件觸發。( 點了一個超連結 )
第三個,邏輯計算。( 算出滑鼠位置、元素裡面藏了哪些參數 )
第四個,畫面改變。( 畫面上顯示一個DIV,原來是一個小選單! )
第五個,事件綁定。( 綁定mouseleave事件,滑鼠移開DIV元素就消失。 )

套件初始化,要在哪裡初始化呢?
一般來說都是放在$(document).ready裡面
因為那時候DOM已經生成,是個不錯的時機點。
初始化的技巧是指有沒有甚麼元素可以先生成?
有沒有甚麼值可以先計算存起來?
生成的元素跟值,可以放在哪邊?避免觸發時發生延遲。

套件觸發的技巧是,有沒有東西可以"不用"重複生成的?
有時候,我們很喜歡把一堆元素remove掉,然後觸發的時候又append進來。
你消耗了記憶體,也消耗CPU。
那問題就又變成剛剛的問題,你要存哪?

邏輯計算
我邏輯不好….

畫面改變的技巧是 “你是怎麼放進去的?"
假設套件塞了大量元素到畫面,你塞的方法會大大影響使用者的觀感。
當瀏覽器畫面改變,會觸發瀏覽器的reflow事件。對效能就是一種浪費。
假設你要塞100個li到一個ul裡面。
你就會觸發100次的reflow。而這樣的資源浪費…真的…很浪費。
有時候我們對jQuery的函式也不夠了解。是否可以更進一步的學習使用呢?

事件綁定的技巧是
分清楚甚麼時後綁在單一元素,甚麼時候可以綁在父元素。
說真的我也不知道jQuery底層是怎麼處理這個部分。
不過這個部分非常值得學習。

明天…我們來寫一個套件實際應用這些技巧吧!(喵的,明明昨天就說今天要寫套件!)


上一篇
jQuery套件開發之(五),套件的定義。
下一篇
jQuery套件開發之(七),實作套件。
系列文
jQuery 套件開發之我可不可以跳著說26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言