[情報] jQuery 1.4.3 正式板 release!

[TonyQ (沉默是金。)]

※ [本文轉錄自 Ajax 看板 #1CkUbco8 ]

作者: TonyQ (沉默是金。) 看板: Ajax
標題: [情報] jQuery 1.4.3 正式板 release!
時間: Sun Oct 17 02:05:24 2010


        現在官網上的最新版本，也已經換成 1.4.3 了。


        相信大家最關心的是 new features ，
        這裡有看到有關 1.4.3 相關的異動跟新增項目。

        http://api.jquery.com/category/version/1.4.3/



        這是 1.4.3 的 release note .
        http://blog.jquery.com/2010/10/16/jquery-143-released/


        其中有幾點我覺得蠻有趣值得討論的，

        1.css 函式的優化 ，據說優化 20%，是個可以期待的項目。

        2.CSS 函式在擴充性上做了一些努力，你現在將可以設定自定義的 css項目，
          比方說 jQuery Rotate 就擴充 rotate項目，
          在載入這 plug-in 之後，你將可以使用 $("xx").css("rorate","80")。

          這個對那些需要頻繁處理跨瀏覽器議題的 lib 或者應用應該會蠻有幫助的。

          （看了一下 source code ，這是透過在 css 設定上，
            增加 hook function 來做屬性的對應計算，蠻直覺的。

            @see jQuery 1.4.3 source line 5113.
          ）

          在 1.4.2 的時代是透過 curCSS 去操作，
          這隻函式是一個功能複雜的大黑箱，比方說其中就有針對 opacity的操作。


          現在則是把計算綁到 jQuery.cssHooks["opacity"] 中去作運算了，
          等於說他原本原本黑箱的部份給組織化了！

          所以自定義一個 css attribute 的寫法就是像這樣，

          假設我定義一個叫 innerColor 的屬性,
          他的行為是把這個元素跟這個元素裡面的 color 都改成跟我一樣 .

          那我可以這樣寫
          $.cssHooks.innerColor = {
                set:function(elem,value,extra){
                    $(elem).add($("*",elem)).css("color",value);
                },
                get:function( elem, computed ){
                    return $(elem).css("color");
                }
          }

          接著我就可以寫這樣的東西了
          $("#lv1").css("innerColor","red");

          這裡有一個能動的範例 .
          http://fiddle.jshell.net/tp8XW/4/


          這個功能我個人已經可以預期，
          對 jQuery 在跨平台的 css support 上，

          將會有非常大的幫助，畢竟改寫 jQuery 的 source ，
          或者對 jQuery 的 fn 上新東西，比不上直接寫 css 來得直覺。


          （另外還有一個小改善就是 jQuery.cssNumber 這個 object ,
            被定義在這個 object 裡面的屬性名稱處理資料時會自動加上"px"。）


          最後一個不太重要的改變，
          本來的 css 會判斷後要跳到 jQuery.css或 jQuery.style ，
          現在因為加入 hook (就如你們所看到的，他有getter & setter ) ，

          所以一律都從 jQuery.css 出發。

          （另外原本的 jQuery.curCss 也指到 jQuery.css ，
            並且列為 deprecated 。 ）


        3.data-attribute 感覺對一般操作也有些好處，
          過去我們會用自訂attr多少會擔心跟現有的 attr 衝突，
          而且撈 attr 去取我們自己定義的資料好像很怪，

          現在我們可以寫 data attribute , 並且從語意比較相近的 data 取得資料。


        4.針對以 javascript 原生物件為主的 jQuery context 操作異動

          （再強調一次，這裡說的是對非 dom 的物件！）

            a.現在對一個 object 的包裝者下 data 將會真的把資料下在 object上！
              （以前會下在另一個內部的資料物件上。）

                舉例來說
                var obj = {}

                $(obj).data("hello","world");
                $("body").append(obj.hello); // you will get the "world"

                http://jsfiddle.net/6PMA4/

            b.在一個 object 上的事件將被綁定在該 object 的成員裡(__events__)

              這個基本上我沒這需求，就一般用途上，
              我也還想不到綁一個事件在非 dom 的成員上的用途，

              根據官方說法這個改變有助於 js 的資源回收(gc) 。


        5. jQuery.data api 的小異動


           現在對 data() 給入物件時 , 原本會完全取代舊的物件，
           現在則改為 extends 也就是只做 mix-in ，不會進行取代。

           似乎是因為有很多 bug report 提到這件事，
           所以他們覺得這樣比較直覺。XD


        6. dom Traversing

           jQuery 在透過一些與瀏覽器廠商的互動、建議、測試後，

         開始在程式碼中採用 querySelectorAll / matchesSelector ，
         並且因此得到非常棒的 performance 。

         （看對照圖後覺得似乎非常棒還不足以形容。XD）

       （圖片中沒有ie6 ,ie7 是因為他們是沒有support 這 feature 的舊瀏覽器。）


        7.Ajax 這個看起來應該是針對那些想在 ajax 回來時，
          並且在 handler 執行前做一些事情的工具，

          它可以 delay ready 這個事件發生的時間。

          不過這東西我一時想不到有什麼東西可以用，
          感覺是個特殊情境下才會用到的東西。


        8.Event 系列，這裡也有非常棒的 short cut.

          a.第一個是取消事件 bubble 的作法。

            $(xxx).click(function(){ return false;});

            現在將可以直接寫成

            $(xxx).click(false);

            test case
            http://jsfiddle.net/fdJC3/7/
            http://jsfiddle.net/fdJC3/5/


          b.現在你將可以傳遞 data 這個參數給所有內建事件（hover除外）
            data 就是 bind 函式的第三個參數，

            for example

                $("#btn").click({
                    val: "i am data"
                }, function(e) {
                    alert(e.data.val);  // i am data alerted
                });

            test case
            http://jsfiddle.net/fdJC3/6/

            這個通常是用來解 closure 情形下，某些變數 scope 的問題。
            （還記得那個for迴圈綁event 時 i 跑掉的老問題？這個可以解。）

          c.屬性值 event.namespace  基本上這個大部分狀況下不太會用到，
            我相信知道什麼是 event namespace 的人應該也知道它的意義了。XD

            event namespace 在從 js 到 jQuery 系列中有介紹。


        9.Effects , 現在所有 effect 相關的函式，都有 easying 參數可以設定了。
          show/hide/fadeIn/fadeOut 等等，

          每個 effect 的事件間隔現在也有屬性值可以設定了
          jQuery.fx.interval (default is 13 ms.)

       10.兩個新的函式

          a.jQuery.type(obj)  可以幫忙判斷 obj元素的類型，
            有點像 typeof 在做的事情，不過他是用 toString() 去判斷，

            default 可以 support 底下這些類別，其他的一律叫 object。

          null Boolean Number String Function Array Date RegExp Object

            這個應該會比 isArray , isFunction 等函式有用一點。

          b.jQuery.isWindow(obj)

            就字面上的判斷 obj 是不是 window , 沒什麼好說的 .

          c.jQuery.trim 增加判斷瀏覽器是否具有原生函式，
            原因是因為這樣快上很多。


        -----------------------------------------------------

        總結 1.4.3

        1.介面/功能的增加

        2.css函式的抽象化

        3.盡可能的以瀏覽器原生函式取代自己實做


        本來以為看起來很少，真的翻過一輪才覺得...還真不少...

        而且我還漏了 setData跟getData event 沒翻，
        反正這個改變幅度實在是不大。:~

--
    I am a person, and I am always thinking .
    Thinking in love , Thinking in life ,
    Thinking in why ,  Thinking in worth.
    I can't believe any of what ,
    I am just thinking then thinking ,
    but worst of all , most of mine is thinking not actioning...

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.82.219.123
※ 編輯: TonyQ           來自: 111.82.219.123       (10/17 02:12)

--

      網頁上拉近距離的幫手              實現 GMail豐富應用的功臣   

        數也數不清的友善使用者體驗      這就是ｊａｖａｓｃｒｉｐｔ

                                                歡迎同好到 AJAX 板一同討論。

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.82.219.123
推 jojozyzy:好文推
→ jojozyzy:雖然對css進行優化，不過以更改class的方式來走對大部分
→ jojozyzy:的效果來說應該是效能比較高的吧
推 megaman1206:大推!!!
→ TonyQ:什麼更改 class 你指的直接 addClass 嗎 XD
→ TonyQ:我覺得 .css 比較適合那種暫時的狀態改變 比方說animation
推 s25g5d4:他的想法應該是先把CSS寫好 要用時在套class上去吧
→ TonyQ:各有各的優點啦 :D
→ chrisQQ:推
推 one9870:我只能說...這將會改善非常多啊!!!
fix some typo
※ 編輯: TonyQ           來自: 114.137.61.228       (10/18 21:57)