前言
jQuery 團隊的核心開發者 Timmy Willison 在官網宣佈了 jQuery 3.4.0,這距離上個版本 3.3.x 系列的推出已整整過去了一年多。
官方表示這可能是 3.x 分支的最後一個小版本更新,接下來的工作重心將是 jQuery 4.0 大版本的更新。
新版本特性
1、針對 .width 和 .height 的性能改進
在獲取和設置維度時,在某些情況下,這可能會導致佈局顛簸,這基本上意味着瀏覽器計算佈局的次數超過了必要的次數。我們在IE以外的所有瀏覽器中修復了這個問題,這是無法避免的。
2、支持 nonce 和 noodle
爲了支持通過.html和.append等方法添加腳本元素,jQuery將它們分開並附加新的腳本標記來加載和執行遠程內容。在這個過程中,諸如nonce和nomodule被忽略的屬性,但jQuery 3.4.0現在掛在它們上面。
3、針對 Radio 元素新增事件處理程序中的預期狀態
在以下示例中,true第一次單擊該元素時記錄了該日誌。我們修復它,以便checked在執行事件處理程序之前更新屬性。
代碼示例:
var $radios = jQuery(".example");
var $firstRadio = $radios.first();
var firstCheckedState = $firstRadio.prop("checked");
$radio.on("click", function() {
// true in <3.4.0
console.log($firstRadio.prop("checked") === firstCheckedState);
});
$radios.eq(1).click();
4、針對 Object.prototype pollution 問題的小修復
Query 3.4.0在使用時包含一些非預期行爲的修復jQuery.extend(true, {}, ...)
。如果未過濾的源對象包含可枚舉__proto__
屬性,則它可以擴展本機Object.prototype。這個修復包含在jQuery 3.4.0中,但補丁差異存在以修補以前的jQuery版本。
代碼示例:
jQuery.extend(true, {},
JSON.parse('{"__proto__": {"test": true}}')
);
console.log( "test" in {} ); // true
5、棄用positional selectors and the sunset of Sizzle
jQuery的基本API是選擇一些內容,然後對所選內容執行某些操作。Sizzle,jQuery中的選擇器引擎,處理上半部分。它是一個快速有效的小引擎,爲原生選擇器API querySelectorAll和其他原生JavaScript和CSS選擇器鋪平了道路。現在很多這些選擇器已經進入現代瀏覽器,現在幾乎是時候告別Sizzle了。但是爲了在jQuery 4.0中刪除Sizzle,我們還需要刪除我們稱爲位置選擇器的東西,它們是非標準選擇器。
具體而言,jQuery的3.4.0被棄用**:first,:last,:eq,:even,:odd,:lt,:gt,和:nth**。當我們刪除Sizzle時,我們將用一個小包裝器替換它,querySelectorAll如果沒有更大的選擇器引擎,幾乎不可能重新實現這些選擇器。
我們認爲這種權衡是值得的。請記住我們仍然會支持的位置方法,如.first,.last和.eq。你可以用位置選擇器做任何事情,你可以用位置方法來做。無論如何,它們表現更好。
升級
如果從jQuery 3.0+升級,應該沒有兼容性問題。
更新日誌
1、Ajax
2、Core
- 使用isAttached檢查元素的附件(662083ed)
- 微小的效率修復可jQuery.extend / 1.3中(#4246)(#4245,4ffb1df8)
- 保留在DOM操作與src屬性的腳本CSP的隨機數(#4323,00504037)
- 在DOM操作中保留腳本上的CSP nonce(#3541,c7c2855e)
- 支持通過隨機數通過jQuery.globalEval(#4278,5bdc85b8)
- 識別陰影DOM在附件檢查(#3504,9b77def5)
- 防止$ .extend(true,…)的Object.prototype污染(753d591a)
3、CSS
- 確保CSS變量不會摺疊camel- vs kebab-cased名稱(f8c1e902)
- 避免填滿jQuery.cssProps(#3986,2b5f5d5e)
- 正確地檢測與非默認縮放滾動框支持(#4029,821bf343)
- 不要自動追加“PX”到CSS的變量(#4064)(#4063,75b77b48)
- 跳過非元素道具動畫的px- appending邏輯(f5e36bd8)
- 除非必要,否則避免在寬度/高度吸氣劑中強制迴流(#4322,a0abd15b)
- 除非必要,否則不要在寬度/高度cssHook中讀取styles.position(#4185,354f6036)
- 不要將“px”自動附加到可能無單位的CSS網格屬性(#4007,f997241f)
4、外形尺寸
- 修復SVG上的計算外部寬度(#3964,e743cbd2)
- 避免設置寬度/高度時,取boxSizing -這避免了迫使在某些情況下回流(#3991,73d7e625)
- 回落到offsetWidth /身高的邊界框在IE(#4102,315199c1)
5、事件
- 阻止來自雙擊焦點的leverageNative(fe5f04de)
- 添加“代碼”屬性,事件對象(#3978,899c56f6)
- 利用原生事件進行聚焦/模糊/點擊; 傳播的附加數據(#1741,#3423,#3751,#4139,669f720e)
- 尊重DOM操作中的腳本nomodule屬性(#4281,e4de8b46)
- 恢復_evalUrl jQuery.ajax調用dataType:script(13de7c9e)
- 僅評估HTTP成功的腳本src(#4126,c2026b11)