jQuery-1.4.3小閱兵
| | 3 | |
jQuery於2010/10/16就釋出1.4.3版了,但最近忙到幾乎老命不保,拖到今天才下定決心仔細看完新功能說明,順手整理成筆記如下:
【一般改良】
- 引進JSLint工具提升程式碼品質
(JSLint是一套用來驗證Javascript程式碼品質的工具,保哥曾寫過文章介紹) jQuery核心已通過JSLint驗證,但有針對jQuery特性做了權衡,容許一些警告,細節可參考jQuery Core Style Guildeline。 - 更模組化
核心程式中移除了一些內部模組間的相依性,所以現在可以透過Script載入工具如LABjs, RequireJS動態地個別載入core, support, data, events等模組。這項改變也讓jQuery test suite可以不必建置(Build)整份jQuery核心就完成測試(jQuery使用Rhino進行測試,John Resig的這篇文章有提到[見Automated Testing一節]),加快了修改核心與測試的流程。
【新功能】
- CSS模組翻新
.css()與.animate()現在可以使用CSS外掛,做出旋轉(rotate)之類的特異功能。例如使用jQuery Rotate外掛,就可以玩出以下的花樣:
$('#myDiv').css('rotate', 90);
$('#myDiv').animate({rotate: 180});
另外,核心裡將CSS樣式處理區分成兩塊: jQuery.style - 讀取元素style="..."設定項目,以及jQuery.css – 取得套用計算後的樣式屬性。而.css()時會同時用到jQuery.style與jQuery.css。
速度方面,.css()視瀏覽器版本,最快可提升20%。(註: 目前jQuery的測試對象,IE9 Beta已被包含其中囉!) - HTML 5 data-* Attribute
原本jQuery Metadata plugin的功能已被移入核心,HTML5元素的data-*屬性現在可透過jQuery.data()取得,例如:
<div data-role="page" data-hidden="true" data-options='{"name":"John"}'></div>
可使用jQuery取出值來:
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";
注意,data-*的資料會在第一次讀取時存入jQuery,之後不會再重新讀取。 - .data()與Javascript物件
當用.data()設定保存Javascript物件時,將直接指向該物件,而不將其移入jQuery內部的資料物件儲存區。另外,新增了__events__屬性,有助於直接掛載事件在物件上、物件回收時一併回收事件,以及避免事件被JSON序列化。 - .data()新增changeData事件
除了原本的setData, getData事件,1.4.3再新增changeData事件,可在.data()改變資料內容時觸發特定邏輯,如此可實現Data Binding的效果,目前已應用jQuery Data Linking Plugin中。
var user = new User();
$(user).bind("changeData", function( event, name, value ) {
$("#user").find("#" + name).val( value );
}); - .data()直接設定物件時行為改變
.data(Object)時將不再完全取代原有資料物件,而是透過extend()併入新物件,較符合開發人員預期。 - .closest(), .filter(), .is(), .find()效能大幅提升(限特定瀏覽器)
主要關鍵在於引用querySelectorAll以及matchesSelector,速度加快N倍! 但前題是 -- 瀏覽器要支援新方法,所以對Opera, IE6/7只能說抱歉了。 - jQuery.readyWait屬性
可用以延遲Ajax情境下jQuery.ready()的觸發時機。做法是將jQuery.readyWait設定成要延遲的millisecond數,當前置工作完成後,再呼叫jQuery.ready(true)中止延遲,立刻觸發.ready()事件。它已被應用在RequireJS等專案中。 - jQuery.support.ajax
判別瀏覽器是否支援AJAX(XMLHttpRequest) - .bind(“click”, false) / unbind(“click", false)
相當於.bind(“click”, function() { return false; }),用來停用元素的點選動作,但寫法更簡潔。 - .click(data, fn)
內建事件方法也可多傳入eventData! 以前若要傳入eventData,就不能直接用.click(),得回頭寫成.bind(“click”, data, fn),現在.click()也接受eventData囉! - event.namespace
新增event.namespace屬性,可在事件中取得事件的Namespace。 - .show(speed, easing, callback)
跟新增.click(data, fn)的意義相仿,以前要用easing就得回頭寫.animate(),現在show(), hide()等可直接支援easing參數。 - jQuery.fx.interval
新屬性,可設定動畫效果刷新的間隔(預設為13ms)。將值調小,動畫會更流暢,不過這也得看瀏覽器與CPU的能耐而定。 - jQuery.type
用來測試物件的型別,規則為:
若物件為undefined或null,則傳回“undefined”或 “null”。
若物件為瀏覽器內建物件,則傳回對應的名稱。(補充說明)
範例:
jQuery.type(true) === “boolean”
jQuery.type(3) === “number”
jQuery.type(“test”) === “string”
jQuery.type(function(){}) === “function”
jQuery.type([]) === “array”
jQuery.type(new Date()) === “date”
jQuery.type(/test/) === “regexp”
其餘一律回傳“object”。 - jQuery.isWindow
判別物件是否為視窗 - 其他改善
若瀏覽器支援Array.isArray,jQuery.isArray()會變快。若瀏覽器支援String trim(),則jQuery.trim()會變快。心得是: 瀏覽器版本愈新,支援愈廣,jQuery就愈快。
【測試】
jQuery 1.4.3已針對所有支援的瀏覽器版本(IE6+, FF2+, Safari 3.0+, Opera 9.0+, Chrome)完成3621項測試(肅然起敬!!),FF4 100%通過,IE9b剩一個Bug待修。
Comments
# by Kim
cool
# by joe
我上星期就把project改過1.4.3,可是我發現他的live事件變得好慢阿,一個頁面用了2-3個live綁事件就很明顯感覺得出來了,然後還會有綁錯對像的bug阿,所以只好又換回來1.4.2了,我想變慢的原因可能是live是用setInterval 監視事件?? 然後在1.4.3的delay被調的更快了,因為要解決1.4.2的一些奇怪的bug? (個人猜測),我覺得應該很快又會有1.4.4、1.4.5之類的修正吧。
# by joe
果然不到20天又出1.4.4了耶,官網說修正了很多bugs,不知道要不要更新了呢? 目前還看不到吸引人的地方阿,會不會下星期又出1.4.5呢 ㄏㄏ