jQuery 1.8筆記
6 | 16,867 |
jQuery 1.8已於2012/08/09釋出正式版,依照慣例,整理新版本摘要如下:
- CDN同步上架
1.8版已在Microsoft CDN服務上架囉! Google CDN亦已就緒,jsfiddle當然也不落人後,大家可多多利用。[CDN是什麼? 能吃嗎?] - Sizzle引擎重構
Sizzle是jQuery的選擇器引擎,幾乎每次改版都會重構改善效率,這次的重點在於幫忙鏟除querySelectorAll的跨瀏覽器地雷。另外,:has()現在可結合複雜的選擇器或:contains()使用。
最後,關於該死的IE6/IE7,1.8版仍會含淚支援!! - 動畫引擎重構
動畫核心程式歷經長期改版調整,已經有點雜亂。這回砍掉重練,但僅限內層翻修,原有API規格均可正常運作。同時,動畫功能重構後,擴充性更好,例如可提供Promise回報進度,過陣子會有較詳細的文件,想先睹為快請看這裡。 - CSS自動前綴
現階段不少CSS規格在不同瀏覽器上需加註專屬前綴文字才能運作。例如: user-select在Chrome/Safari叫-webkit-user-select、在Firefox上是-moz-user-select、在IE10上則是-ms-user-select。在1.8中,呼叫.css("user-select")會自動依瀏覽器版本決定要加上-webkit-、-moz-還是-ie-。 - $(html, props)更具彈性
在1.8以前,$("<input />", { type: "checkbox", click: function() { alert('Clicked'} }});的寫法中,除HTML Attribute外,只允許click等少數預先定義列舉的方法。
從1.8版起,props參數中可包含任何jQuery或Plugin所定義的方法。但要留意副作用,如果某個Plugin定義了跟HTML Attribute同名的方法,可能導致程式產生非預期的結果。 - 修正了160個以上的Bug
Sizzle與動畫引擎重構後一舉消滅了許多陳年老蟲,眾多CSS及座標定位Bug也在這次幾乎殲滅殆盡。而開發團隊還會繼續抵抗惱人的IE6/7/8行為差異,努力斷後讓大家安心前進。 (但相容IE6/7/8的策略在2.0後可能會改觀) - 程式碼更小
透過重構與程式碼清理,1.8壓縮後比1.7.2還少幾百個Byte,力守程式碼不隨改版變痴肥的原則。 - 模組化
採用grunt建置模式,可依專案需求打造只保留必要功能的精簡版jQuery,例如: -ajax,-css,-deprecated,-dimensions,-effects,-offset等模組可視狀況排除,讓jquery.js更小。(但一旦搞出客製版,升級換版時需留意處理)
以下是1.8版起移除的API,可能導致升級後爆炸,請仔細檢核: (基本上只有Hacking式的寫法會用到,理論上影響應不大)
- $(element).data("events")
這是存取事件函數的隱藏功能,官方不建議使用,1.8版索性正式移除。沒有它會死的話,可以用$._data(element, "events")替代,但繼續用遲早要死,請好自為之。 - Deffered.isResolved(), Deferred.isRejected()
1.7版加入了Deferred.state()取代了這兩個笨方法,1.8版正式跟他們說Bye Bye吧! - $(element).closest(Array)傳回陣列
一般closest()只會傳回jQuery物件,這種特殊用法我一輩子沒看過,那很好,就繼續不知道吧! - $.currCSS
沒聽過$.currCSS? 很好,這條也當成沒看到吧! - $.attrFn
原本是配合$(html, props)使用的祕密方法,1.8起已不在需要,故先將其改成虛函數,1.9版時會正式移除。
【延伸閱讀】強者們的1.8版深入剖析:
- TonyQ [情報] jQuery 1.8 beta1
- 男丁格爾 jQuery 1.8 Beta 1
Comments
# by Ike
請教… TonyQ 的說明中提到「async:false」將 Remove, 如果我想要達到「等候回應再繼續之後的程序」,該採用什麼方式呢?
# by Jeffrey
to lke, "等到回應再繼續之後的程序",可善用ajax傳回Deferred物件的.then(), done(), fail()加掛指定的邏輯。jQuery 1.5筆記(上) 一文有簡單的範例。 async=false雖然也可以確保你的程式在得到回應後才執行,但回應沒傳回來之前,整個網頁會完全凍結無法操作,嚴重破壞使用者體驗,代價實在太高了! 當代設計網頁已鮮少採用這種做法,應該是jQuery決定將其移除的理由。若一定要採用,可能就要自行操控XHR才能實現。
# by Ike
嗯,為了使用者體驗,看來得多弄一點小工讓使用者乖乖等候了 謝謝您的回覆 ^^~
# by REX
如果真的硬要async的話 其實在beforeSend設定XHR就可以了 不過個人想法跟版大一樣 非必要其實不要阻擋USER的瀏覽 如果真的非得要等可以用when或許可以符合一樓的需求
# by Kelly
請教一下,如果我的網頁為了維護方便將網頁內容拆成多塊div,每個div的內容分別放在一個檔案中,我目前是採用$('#div').load(filename); 或 $.get(filename),function(data){ $('#div').append(data); }); 的方式去做,但是因為區愧有四五個,每個區塊都要花上10-3Xms去抓取,耗時又有點笨的感覺,有什麼比較聰明的方法嗎? 發在這篇底下有點不對題,但是因為找不到合適的地方,所以只好找一個比新的文章底下發 在麻煩黑大有空指點一下,感謝
# by Jeffrey
to Kelly, 依個人的看法,用AJAX分成四五次取回內容,很難調到讓人滿意的順暢度。我有兩個建議改良做法: 1) 由後端程式一次讀入五個div內容做一次傳回,減少AJAX Request次數 2) 直接在後端讀取div內容組成完整HTML傳回,連AJAX讀取更新都省了(但這可能不符合想動態切換div內容的情境)