jQuery於2010/10/16就釋出1.4.3版了,但最近忙到幾乎老命不保,拖到今天才下定決心仔細看完新功能說明,順手整理成筆記如下:

【一般改良】

  1. 引進JSLint工具提升程式碼品質
    (JSLint是一套用來驗證Javascript程式碼品質的工具,保哥曾寫過文章介紹) jQuery核心已通過JSLint驗證,但有針對jQuery特性做了權衡,容許一些警告,細節可參考jQuery Core Style Guildeline
  2. 更模組化
    核心程式中移除了一些內部模組間的相依性,所以現在可以透過Script載入工具如LABjs, RequireJS動態地個別載入core, support, data, events等模組。這項改變也讓jQuery test suite可以不必建置(Build)整份jQuery核心就完成測試(jQuery使用Rhino進行測試,John Resig的這篇文章有提到[見Automated Testing一節]),加快了修改核心與測試的流程。

【新功能】

  1. 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已被包含其中囉!)
  2. 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,之後不會再重新讀取。
  3. .data()與Javascript物件
    當用.data()設定保存Javascript物件時,將直接指向該物件,而不將其移入jQuery內部的資料物件儲存區。另外,新增了__events__屬性,有助於直接掛載事件在物件上、物件回收時一併回收事件,以及避免事件被JSON序列化。
  4. .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 );
    });
  5. .data()直接設定物件時行為改變
    .data(Object)時將不再完全取代原有資料物件,而是透過extend()併入新物件,較符合開發人員預期。
  6. .closest(), .filter(), .is(), .find()效能大幅提升(限特定瀏覽器)
    主要關鍵在於引用querySelectorAll以及matchesSelector,速度加快N倍! 但前題是 -- 瀏覽器要支援新方法,所以對Opera, IE6/7只能說抱歉了。
  7. jQuery.readyWait屬性
    可用以延遲Ajax情境下jQuery.ready()的觸發時機。做法是將jQuery.readyWait設定成要延遲的millisecond數,當前置工作完成後,再呼叫jQuery.ready(true)中止延遲,立刻觸發.ready()事件。它已被應用在RequireJS等專案中。
  8. jQuery.support.ajax
    判別瀏覽器是否支援AJAX(XMLHttpRequest)
  9. .bind(“click”, false) / unbind(“click", false)
    相當於.bind(“click”, function() { return false; }),用來停用元素的點選動作,但寫法更簡潔。
  10. .click(data, fn)
    內建事件方法也可多傳入eventData! 以前若要傳入eventData,就不能直接用.click(),得回頭寫成.bind(“click”, data, fn),現在.click()也接受eventData囉!
  11. event.namespace
    新增event.namespace屬性,可在事件中取得事件的Namespace。
  12. .show(speed, easing, callback)
    跟新增.click(data, fn)的意義相仿,以前要用easing就得回頭寫.animate(),現在show(), hide()等可直接支援easing參數。
  13. jQuery.fx.interval
    新屬性,可設定動畫效果刷新的間隔(預設為13ms)。將值調小,動畫會更流暢,不過這也得看瀏覽器與CPU的能耐而定。
  14. 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”。
  15. jQuery.isWindow
    判別物件是否為視窗
  16. 其他改善
    若瀏覽器支援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呢 ㄏㄏ

Post a comment