[譯] jQuery 3.0 終於釋出了

donghuan1發表於2019-05-07

從2014年10月開發到現在,jQuery 3.0終於釋出了!我們的目的是創造一個更苗條、更快的jQuery版本(並且考慮到了向後相容性)。我們已經刪除了舊的IE瀏覽器的解決方案支援並且採用了一些更現代化的 web API。它是2.x分支的延續,並且加入了幾項我們認為早該加入的重大改變。雖然 1.12 和 2.2 分支在短時間內會繼續收到關鍵的補丁,但不會有新的功能和重大更改。jQuery 3.0是jQuery的未來。如果你需要支援IE6-8,你可以繼續使用1.12的最新版本。

雖然一下升級到了3.0版本,我們預計在升級現有程式碼的時候不會發生太多問題。當然,此次主版本號的更新有著打破一切的大改變,但我們希望這些改變不會破壞大多數人的程式碼。

為了幫助大家升級,我們有一個全新的升級指南 3.0 Upgrade Guide。和遷移外掛 jQuery Migrate 3.0 plugin 來幫助你定位程式碼的相容問題。 你對這些變化的反饋將極大的幫助我們,所以請嘗試在你現有的程式碼和外掛裡使用它們。

你可以從 jQuery CDN 獲取這些檔案, 或直接連結它們:

code.jquery.com/jquery-3.0.…

code.jquery.com/jquery-3.0.…

通過 npm 安裝:

npm install jquery@3.0.0
複製程式碼

此外,我們已經發布 jQuery Migrate 3.0(遷移外掛)。我們極度推薦使用它來解決遷移jQuery 3.0時遇到的所有問題。你可以在這裡獲取這些檔案:

code.jquery.com/jquery-migr…

code.jquery.com/jquery-migr…

npm install jquery-migrate@3.0.0
複製程式碼

在這裡檢視更多關於升級 jQuery 1.x 和 2.x 到 3.0 過程中 jQuery Migrate 的幫助資訊: the jQuery Migrate 1.4.1 blog post.

精簡版

最後,此次釋出我們還加入了一些新東西。有時你並不需要ajax,或者在眾多獨立庫中你只需要一個用於 ajax 請求的庫。以往,更簡單的方式是使用CSS和類的組合操作來滿足所有的web動畫需求。針對普通版的jQuery包含ajax和effects modules(效果模組),我們釋出了沒有這些內容的精簡版。總而言之,精簡版刪除了ajax,effects和已經廢棄的程式碼。jQuery的大小和對載入效能的影響已經微乎其微,但是精簡版仍在gzip壓縮下比普通版小了6k左右,23.6k vs 30k。這些檔案也都可以在npm包和CDN獲得。

code.jquery.com/jquery-3.0.…

code.jquery.com/jquery-3.0.…

此版本是通過我們的自定義建構 API 生成,因此你可以按照自己的需求來選擇新增或剔除某些模組。更多的資訊請看: jQuery README

jQuery UI 和 jQuery Mobile 的相容

雖然大部分是沒有問題的,但是有幾個jQuery UI和jQuery Mobile的相容問題已經在即將釋出的版本里被解決,如果你發現問題,請記住它有可能已經在上游被解決,用jQuery Migrate 3.0 plugin來修復它,新版本預計很快釋出。

主要的變化

這些釋出中,高亮的地方表示重要的新特性、改進和bug修復。你可以在3.0 Upgrade Guide挖掘更詳細的資訊。完整的問題解決列表在我們的GitHub bug tracker。如果你看了 3.3.0-rc1的部落格帖子,以下說的和部落格裡是一樣的。

jQuery.Deferred 已經相容 Promises/A+ 規範

jQuery.Deferred 物件已經升級相容 Promises/A+ 和 ES2015 規範,且已在Promises/A+ Compliance Test Suite驗證。這意味著.then()方法會有一些重大的改變。Legacy行為可以通過使用現在不宜用的.pipe()方法(具有簽名認證)來代替.then()使用來重新獲取

  1. .then() 丟擲異常變成一個拒絕值。以前,異常在回撥裡被一路丟擲。任何deferred物件依靠deferred丟擲異常的方式都無法解決問題。

示例: 未捕獲異常 vs. 拒絕值

var deferred = jQuery.Deferred();
deferred.then(function() {
  console.log("first callback");
  throw new Error("error in callback");
})
.then(function() {
  console.log("second callback");
}, function(err) {
  console.log("rejection callback", err instanceof Error);
});
deferred.resolve();
複製程式碼

在以前,“first callback” 將會列印,異常會被丟擲。然後就會終止,"second callback" 和 “rejection callback” 都不會被列印。在新版裡,符合標準的行為是你將會看到 "rejection callback" 和 true 被列印,err 是第一個回撥的拒絕值。

  1. 通過.then()建立Deferred的resolution狀態現在是被它的回撥函式控制-異常將會是拒絕值(rejection values)且 non-thenable 返回的結果是 fulfillment 值。而之前的版本中,拒絕處理 (rejection handler)返回的結果是 rejection 值

示例: 來自拒絕回撥函式的返回值

var deferred = jQuery.Deferred();
deferred.then(null, function(value) {
  console.log("rejection callback 1", value);
  return "value2";
})
.then(function(value) {
  console.log("success callback 2", value);
  throw new Error("exception value");
}, function(value) {
  console.log("rejection callback 2", value);
})
.then(null, function(value) {
  console.log("rejection callback 3", value);
});
deferred.reject("value1");
複製程式碼

以前,將會列印“rejection callback 1 value1”, “rejection callback 2 value2”, 和 “rejection callback 3 undefined”.

現在,符合標準的行為是列印“rejection callback 1 value1”, “success callback 2 value2″, 和 “rejection callback 3 [object Error]”

  1. 回撥通常是非同步的,即使Deferred已被解決。在這之前,這些回撥一經繫結會同步執行。

示例: 非同步 vs 同步

var deferred = jQuery.Deferred();
deferred.resolve();
deferred.then(function() {
  console.log("success callback");
});
console.log("after binding");
複製程式碼

以前,會先列印 “success callback” 然後列印 “after binding”。現在,先列印 “after binding” 然後列印 “success callback”.

重要:當捕獲異常時有利於在瀏覽器中進行除錯,通過拒絕回撥函式來處理異常非常具有陳述性。當與promises打交道時,記住至少要增加一個拒絕回撥函式。否則,任何錯誤都不會提示。

我們寫了一個外掛用來除錯 Deferreds 的 Promises/A+ 相容性。如果在控制檯無法看到錯誤的詳細資訊和來源,可查閱這裡jQuery Deferred Reporter Plugin.

jQuery.when 升級後可以接受所有thenable 物件,包括原生的 Promise 物件。

github.com/jquery/jque…
github.com/jquery/jque…

為 Deferreds 新增 .catch()

catch()方法在promise 物件中的別名是 .then(null, fn)

github.com/jquery/jque…

錯誤情況不靜默失敗

也許在夜深人靜的時候,你突然會想“window的offset是多少?”,然後你意識到這是一個瘋狂的問題 —— window哪來的offset?

在過去,jQuery 也嘗試過去返回某些東西而不是丟擲異常。在這個window的offset問題的例子裡,在jQuery 3.0裡答案是{ top: 0, left: 0 },這種情況下,瘋狂的問題會丟擲錯誤而不是被默默的忽略了。請在這個版本里試試所有以來jQuery的程式碼是否會影藏類似無效的輸入。

github.com/jquery/jque…

刪除棄用的事件別名

.load, .unload, 和 .error, 在jQuery 1.8後被廢棄,使用 .on() 來註冊監聽器。

github.com/jquery/jque…

動畫現在使用requestAnimationFrame

在支援requestAnimationFrame API的平臺上,除IE9和Android4.4外,幾乎被廣泛支援。jQuery現在也將使用這個API來處理動畫。這將讓動畫更加順滑、更少的cpu消耗,在移動端也將更省電。

jQuery在幾年前曾嘗試使用requestAnimationFrame。但現存程式碼有有幾個嚴重相容性問題不得不推遲。我們認為通過在瀏覽器選顯示卡顯示的時候暫定動畫處理好了大部分問題,但是,所有依賴動畫的程式碼想要實時執行是不切合實際的。

jQuery自定義選擇器的大提速

感謝來自谷歌的 Paul Irish的檢測工作,我們發現當:visible這種的自定義選擇器在同一份檔案中被多次執行時,大量額外的運算可以省略跳過。現在這一類的運算速度提升了 17 倍!

要記住的是,儘管有了這些改進,但像 :visible:hidden 這類選擇器耗時代價還是很高的,因為依賴瀏覽器上的元素是否已經展示出來。在最壞的情況下,這可能需要在完全重算CSS樣式和頁面佈局後才能執行。大部分情況我們不能阻止你去使用它,但我們建議你可以測試一下你的頁面,看看這些選擇器是否造成了效能問題。

這些改動其實在1.12/2.2就已經完成了,但是我們還是想在jQuery 3.0裡重申一次。

github.com/jquery/jque…

如上面提到的,升級指南 已為各位備好,除了有助於升級,還列出了更多顯著的變化。

相關文章