jQuery 1.7筆記

jQuery又推出新版本囉! 1.7版已於11/3正式發佈~ 又到了該整理新版筆記的時候:
PS: 從上週五就有"好多人"提醒我(只差走在路上沒被人拍肩): 嘿! jQuery出1.7了耶~~ 雖然遲了幾天，但我還是很自愛地再當一下值日生... XD

1. .on()及.off()
   要了解這兩個新事件函數前，得先從.delegate()講起。簡單來說，.delegate()的做法是在父元素掛載事件函數，用以處理其下子元素(甚至是稍後才要建立的子元素)的事件邏輯。例如: $("#someTable").delegate("td", "click", fn)可以指定<table id="someTable">其下所有<td>的click事件，即使當時<table>根本是空的也無所謂。這種寫法比$("#someTable td").click(fn)來得有效率，且格外適合<td>會動態增減的場合，不用每次.append()完<td>後都補呼叫.click(fn)；而且樣要處理未來才新增的元素，.delegate()也比.live()效率更好一點點。(關於.delegate()的進一步說明，可參考前文)
   至於.on()/.off()，我們可以想像它們就是具有.delegate()功能的.bind()及具有.undelegate()功能的.unbind()!
   $(elements).on( events [, selector] [, data] , handler );
   $(elements).off( [ events ] [, selector] [, handler] );
   由規格看來.on(), .off()只是讓.bind()及.unbind()多支援selector參數，當傳入selector參數時，就等同於.delegate()及.undelegate()。例如: 原本的$("#myTable").delegate("td", "click", fn)可寫成$("#myTable").on("click", "td", fn)。
   新增這兩個函數的用意主要是讓.delegate()/bind()回歸一致的API介面: 原來.delegate()是先傳selector，再傳事件名稱，.bind()的第一個參數則是事件名稱，而.on()的寫法跟.bind()更接近，只需多傳selector就可以變身delegate()! jQuery 1.7希望用on/off取代bind/delegate、unbind/undelegate。[有一點要注意，如果要傳入字串當成事件的data參數，為避免.on()無法釐清傳入的到底是selector還是data，需在selector參數傳入null以明確分別]
   除此之外，推改用on/off另一個好處是"比較短，可以少打幾個字"... ( jQuery真是個追求簡潔成痴的語言呀! XD)
2. 事件委派的效能提升
   前面所提的.delegate()事件委派做法，在網頁或元素很複雜時，會比.bind()效率高出許多!(可參考前文的範例) 當代Javascript開發裡，事件委派扮演的角色日益重要，有鑑於此 ，jQuery團隊便積極致力於.delegate()的效能提升。在1.7版中，針對.delegate()的selector執行做了最佳化(針對部分情境使用瀏覽器內建的matchesSelector API取代Sizzle引擎)，相較於1.6.4，效能幾乎提升為兩倍。
3. 在IE6/7/8上對HTML5有更好的支援
   原本在IE6/7/8等"HTML5文盲"瀏覽器執行.html()時，無法支援<section>等HTML5標籤，jQuery 1.7可透過innerShiv克服此一問題，但網頁必須引用html5shiv或Modernizr等HTML5相容程式庫。延伸閱讀: The Story of the HTML5 Shiv
4. 改善.slideToggle() or .fadeToggle()等動畫運作時初值及結束狀態的保存，在搭配.stop()時行為更直覺，更符合預期。
5. 支援Asynchronous Module Definition (AMD API，一種解決Javascript模組相依性及非同步載入議題的技術)
6. jQuery.Deferred提供新的進度回報及通知方法，並增加.state()可查詢最新狀態。另外，jQuery.Deferred底層改用jQuery.Callbacks作為佇列及觸發一系列處理程式(Handler)的管理機制，可供Plugin開發者應用。
7. 新增jQuery.isNumeric()函數，可用來判斷傳入值是否為數字
8. 移除了一些相容較差或未公開且過時的屬性/函數: event.layerX, event.layerY(但可由event.orginEvent.layerX取得，如果你執意要續用的話)、jQuery.isNaN()、jQuery.event.proxy()