從這章開始就跟傳統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)