1. 程式人生 > >jQuery3.2.1 和2.0和 1區別

jQuery3.2.1 和2.0和 1區別

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-strict mode的JavaScript程式碼可以和諧共存。

這裡有一些例外:某些版本的ASP.NET,因為strict mode的緣故,無法與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,用於非同步計算的物件,現在在ECMAScript 6中已經被標準化;它們的執行狀況和特性的詳細說明參見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方法能夠接收更加寬廣的輸入範圍,比如原生的ES6 Promises和Bluebird Promises,這也使得編寫更復雜的非同步回撥成為了可能。

9. 新的顯示/隱藏邏輯
為了增加響應式設計的相容性,與元素顯示和隱藏的程式碼在jQuery 3中進行了更新。
從現在開始,.show()、.hide()和.toggle()方法將會以內聯樣式為重點取代以前的計算樣式,這種方式能夠更尊重樣式列表的改變。
新的程式碼儘可能的尊重樣式列表中所呈現的數值,這意味著CSS規則可根據事件(如裝置重新定位和視窗尺寸調整)進行動態改變。
這個說明檔案申明瞭最重要的結果就是:
“作為結果,斷開連線的元素除非指定了內聯display: none,否則將不再認定為是隱藏的。因此,在jQuery 3.0中,.toggle()不再對斷開連線元素與已連線元素進行區分。”

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

10. 對於防止XSS攻擊的額外保護
jQuery 3增加一個額外的安全層使用者用於防備跨站點指令碼(XSS)攻擊,它需要開發者指定$.ajax()和$.get()方法中的選項為dataType: "script"。
  1. 移除舊的IE工作區

   2. jQuery 3.0執行在Strict Mode下

   3.引進for...of迴圈

   4. 動畫方面採用新的API

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

   6. 類操作方法支援SVG

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

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

   9. 新的顯示/隱藏邏輯

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