jQuery 3.0最終版發布，十大新特性眼前一亮

標籤：瀏覽器   原始碼   工作區   相容性   開發人員   

jQuery 3.0在日前發布了最終的全新版本。從2014年10月，jQuery團隊對這個主要大版本進行維護開始，web開發人員社區便一直在期待著這一刻的到來，終於在2016年6月他們迎來了這一個最終版

通過jQuery 3.0的版本更新說明，我們看到了一個保持著向後相容的更輕便，更快速的jQuery。在本文中，我們將介紹一些令人眼前一亮的jQuery 3.0全新特性。

開始前的說明

如果你想要下載jQuery 3.0進行親自實驗，可以通過該頁面進行下載。另外，升級指南和原始碼也值得你一看。

如果你想要測試一下你的項目如何在jQuery 3.0中工作的，你可以嘗試通過jQuery遷移外掛程式來識別代碼的相容性問題，你也可以查看jQuery未來發展的時間表。

 

1. 移除舊的IE工作區

新的最終版最主要的目標是更加快速，更加時尚，因此，那些支援早於IE9版本的相關技術與工作區都被移除了。這意味著如果你想要或者需要支援IE6-8，你必須用回1.12版本，因為甚至是2.X版本都無法完整支援早於IE9的瀏覽器。

注意：在jQuery 3中還棄用了一些其它的功能。截止到2016年6月，升級指南還沒有提供一個對於棄用功能的分組整理。因此，你如果想要瞭解棄用功能，可以通過ctrl+f鍵來進行搜尋。

 

2. jQuery 3.0運行在Strict Mode下

大多數支援jQuery 3的瀏覽器都支援strict mode，而在本次更新中對此進行了規定。

 

雖然jQuery 3是寫在strict mode中的，但是你需要瞭解的是你的代碼並不需要運行在strict mode中，因此如果你想要把以前的代碼遷移到jQuery 3，你不需要對已存在的jQuery代碼進行重寫。Strict和non-strictmode的JavaScript代碼可以和諧共存。

這裡有一些例外：某些版本的ASP.NET，因為strictmode的緣故，無法與jQuery 3相容，

 

3. 引進for...of迴圈

jQuery 3支援for...of語句，這是由ECMAScript 6中新引進的一種for迴圈語句。這提供了對Arrays，Maps和Sets這樣的可迭代對象一種更直接的遍曆方法。

在jQuery中，for...of迴圈可以取代以前的$.each(...)文法，並且更容易通過jQuery的元素集合進行迴圈。

注意：for...of只能在支援ECMAScript 6的環境下或者使用Babel這樣的JavaScript編譯器下工作。

 

4. 動畫方面採用新的API

jQuery 3使用requestAnimationFrame() API來執行動畫，使動畫運行得更加順暢、快速。新的API只用於支援它的瀏覽器，對於那些更老的瀏覽器（如IE9）jQuery使用先前的API來作為顯示動畫的後備方案。

 

5. 對包含特殊含義的字串提供轉義的新方法

新的jQuery.escapeSelector()提供了對在CSS中存在特殊含義的字串或字元進行轉義的方法，該方法可使這些字串或字元能夠繼續用於jQuery選取器中，而無需對那些無法進行正確理解的JavaScript解譯器進行轉義。

這個樣本可以讓你更好的瞭解這個全新的方法：

舉個例子，頁面中某個ID為“abc.def”的元素由於選取器將其解析為ID為“abc”且包含一個名為“def”的類的對象，而無法被$( "#abc.def" )選定。但是它可以由 $("#" + $.escapeSelector( "abc.def" ) )來進行選定。

我無法確定發生中情況的頻率，但是假如你碰到過這種類似的情況，這無疑給了你一個解決該問題的簡單方法。

 

6. 類操作方法支援SVG

不幸的是，jQuery 3現在還無法完整的支援SVG，但是對於操作CSS類名稱的jQuery方法，如.addClass()和.hasClass()現在可以將SVG文檔作為目標。這意味著你可以修改（添加、刪除、切換）或者尋找SVG（可縮放向量圖形）下的jQuery類，然後使用CSS的類樣式。

 

7. 延遲物件現在與JS Promises相容

JavaScript Promises，用於非同步計算的對象，現在在ECMAScript6中已經被標準化；它們的健全狀態和特性的詳細說明參見Promises/A+標準。

在jQuery 3中，延遲物件已經與新的Promises/A+標準相相容，延遲物件已經成為讓建立回調隊列成為可能的可鏈對象(chainable objects)。

新的特性改變了非同步回呼函數執行過程，Promises允許開發人員編寫在邏輯上與同步代碼更接近的非同步代碼。

 

8. jQuery.when()對於多種參數的不同解讀

$.when()提供了執行回呼函數的一種方法，它成為了jQuery 1.5之後的一部分。這個方法非常靈活，它適用於零參數，也適用於一個或者多個作為參數的對象。

jQuery 3改變了當包含$.then()方法時對$.when()中參數的解讀方法，你可以對$.when()進行額外的參數回調。

在jQuery 3中，如果你在$.when()中的then()方法內增加一個輸入參數，該參數將會被解釋成一個可與Promise相容的"thenable"。

這意味著 $.when方法能夠接收更加寬廣的輸入範圍，比如原生的ES6Promises和Bluebird Promises，這也使得編寫更複雜的非同步回調成為了可能。

 

9. 新的顯示/隱藏邏輯

為了增加響應式設計的相容性，與元素顯示和隱藏的代碼在jQuery 3中進行了更新。

從現在開始，.show()、.hide()和.toggle()方法將會以內聯樣式為重點取代以前的計算樣式，這種方式能夠更尊重樣式列表的改變。

新的代碼儘可能的尊重樣式列表中所呈現的數值，這意味著CSS規則可根據事件（如裝置重新置放和視窗尺寸調整）進行動態改變。

這個說明檔案申明了最重要的結果就是：

“作為結果，中斷連線的元素除非指定了內聯display: none，否則將不再認定為是隱藏的。因此，在jQuery 3.0中，.toggle()不再對中斷連線元素與已串連元素進行區分。”

如果你想要更好的瞭解關於全新的顯示/隱藏邏輯，這個Githubdiscussion會對你有協助。jQuery開發人員還發布了Google文檔表來展示在不同用例下新規則的運轉。

 

10. 對於防止XSS攻擊的額外保護

jQuery 3增加一個額外的安全層使用者用於防備跨網站指令碼(XSS)攻擊，它需要開發人員指定$.ajax()和$.get()方法中的選項為dataType: "script"。

換言之，如果你想要執行跨網站的指令碼請求，你必須在這些方法中作出這樣的聲明。

 

新的改變對於當“遠端站台傳遞非指令碼內容之後又提供有惡意指令碼的服務內容”的情況是非常有效。這個變化不會影響$.getScript()方法，因為它明確地設定了dataType: "script"選項。

jQuery 3.0最終版發布，十大新特性眼前一亮