---

※ [本文轉錄自 Ajax 看板]

---

        從這章開始就跟傳統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怎麼做的？



        或者是像tooltip 會顯示在物品旁邊的那個小視窗元件也是helper.


        大部分的helper , 通常是在 載入.js 時 ,
        把一些不顯示html藏在body的尾巴,
        如 tooltip plug-in 就是個很典型採用這種方案的.

        也有一些是觸發時再把一堆html塞進去的 , 如 jQuery.ui.dialog.


      ＠結論

        所謂的plug-in，其實是把重複子問題獨立出來解決作成solution的結果,

        但是他們通常也有相對的代價 , 挑選plug-in時不能只看功能 ,
        也要注意是不是會造成頁面crash等狀況 .

        對 javascript 原理多認識一點 , 用起來才比較不會覺得痛苦萬分.

--
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 221.169.78.140

--
        從書本中，你可以發現我的各種興趣。
        從ＣＤ中，你可以瞭解我所喜歡的偶像明星。

        或許從文字你很難以瞭解一個人，但從物品可以。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 221.169.78.140
※ 編輯: TonyQ           來自: 221.169.78.140       (11/30 17:15)

--