推 cloudccw:推推 11/30 17:34
推 CKone1209:再推！ 11/30 23:22
推 iambonnie:推~ 12/02 09:56
從這章開始就跟傳統js比較脫節了，介紹jQuery的細部應用。
這一章的目標是幫助讀者們瞭解現有的plug-in是如何而來,
以及如何按照自己的需求撰寫自己的plug-in (if need).
先提一個名詞定義：
jQuery context 指的是 $("div") 這類已經經過jQuery init過的物件。
（註：這只是筆者方便講解區分用,不一定是正式定義.）
────────────────────────────────
＠所以，jQuery 是怎麼運行的呢？
jQuery的大概架構是這樣的 , 它透過 javascript 的prototype結構,
把 「jQuery」這個祖先級的 Object ,
跟由 jQuery build 出來的 jQuery context做簡單的區分.
＠哪裡是起點？
因為這樣講實在是太抽象 , 所以我們要來從程式碼看世界 ,
接下來我們從 $("div") 這個行為隱含的意義來看起.
翻到原碼最開始的地方.
var jQuery = window.jQuery = window.$ =
function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
（註：此處也是 $ 這個縮寫的由來 , 可以在這裡自由改成別的,
如筆者工作的環境曾經jQuery lib跟prototype lib共用 , 所以改成 jq .)
再搭配 jQuery.fn = jQuery.prototype = {/*...中略...*/ }
這張來看 , 就可以了解到它其實是產生了一個 jQuery型態的資料.
而所有這些資料都共享 jQuery.prototype 所定義的function.
預設的 jQuery.prototype 含有的funciton簡單列部份在後面：
size
get
each
index
attr
css
text
append
html ...
看到這裡應該很熟悉吧！
其實就是我們平常操作 $("hi").html()中的html這些函數來由，
當然還有一些純輔助用的隱藏function。
＠等等，你說的實在是太快了，我還不懂什麼是prototype！
prototype 在討論時可能有兩種含義，
一種是prototype lib，它跟jQuery一樣也是一個有許多支持者的 js lib.
另一種則是用來定義javascript Function 所new 出來共享的成員。
此處我們講的是後者。
可先行參考ericsk大的介紹文章
http://blog.ericsk.org/archives/1089
此處之所以會用到這特性，是因為不管現有的物件是否已經產生，
當我對 jQuery context 定義 function 後，所有的jQuery context都要有。
＠科技始終來自於人性（惰性？）
底下以一個簡單的例子來看 ,
假設我們可能常常有需要把某些元素從 (x1,y1) 移到 (x2,y2)
以過去的作法，我們可能會這樣做。
$("#someone").css("position","absolute")
.css("left",x2)
.css("top",y2);
看起來似乎頗簡單 , 但是寫久還是會很煩 ,
那我們有沒有可能把上面的code簡化成這樣呢？
$("#someone").move(x2,y2);
看起來是不是更簡單更直覺了點？
很多plug-in的目標都是簡化一些重複且多餘的code .
＠how to do it ?
以這樣的例子來看 , 你只要會寫funciton ,
就可以很快就幫 jQuery context擴充出 move這個function.
只要在 jQuery.js 載入後加上這段code , 就多一個 move(x,y) 可以用了.
$.fn.move=function(x,y){
this.css("position","absolute") //此處的this代表著
.css("left",x) // jQuery context
.css("top",y);
}
註：也可以用底下的寫法 , 意義是一樣的.
jQuery.fn.extend(
{
move:function(x,y){...}
}
)
兩種寫法的demo page
http://tonyq.org/jqtalk/testJQExtend.html
http://tonyq.org/jqtalk/testJQPlug.html
＠就這樣？
嗯 , 就擴充方面的確是就這樣 ,
文末再帶一點常見的plug-in模式與參考資料.
如 thick box/light box 這類標榜著加一個class就可以處理好的 ,
其實謎底就在於他們載入 .js 檔擴充後 ,再執行一段類似這樣的code.
$(function(){
$(".thickbox").xxxxx();
});
透過 ready 事件觸發他們來做配置 , 而達到使用者幾乎不用寫js的效果.
＠那些會跳視窗的plug-in怎麼做的？
有一些比方說 drag and drop , 常常會有一個暫時替代用的元素,
以拖曳來講，顯示在畫面上被拖曳的那個元素不一定是真正的元素,
也有可能是複製出來的代替品 , 這類的東西我們就叫 helper .
或者是像tooltip 會顯示在物品旁邊的那個小視窗元件也是helper.
大部分的helper , 通常是在 載入.js 時 ,
把一些不顯示html藏在body的尾巴,
如 tooltip plug-in 就是個很典型採用這種方案的.
也有一些是觸發時再把一堆html塞進去的 , 如 jQuery.ui.dialog.
＠結論
所謂的plug-in，其實是把重複子問題獨立出來解決作成solution的結果,
但是他們通常也有相對的代價 , 挑選plug-in時不能只看功能 ,
也要注意是不是會造成頁面crash等狀況 .
對 javascript 原理多認識一點 , 用起來才比較不會覺得痛苦萬分.
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 221.169.78.140
※ TonyQ:轉錄至看板 Web_Design 11/30 17:11
//修正錯字
※ 編輯: TonyQ 來自: 221.169.78.140 (11/30 17:16)