譯者：李鑫
本文為極客學(xué)院Wiki組織翻譯毒费，轉(zhuǎn)載請注明出處改化。
時間：2016.3.11
十年前 jQuery 的出現(xiàn)震撼了整個 Web 開發(fā)鸠信，如今它的一些優(yōu)秀特點仍非常適用。利用 jQuery衣屏，用戶可以方便地與 DOM 進(jìn)行交互施绎，執(zhí)行 Ajax 請求，創(chuàng)建動畫骄蝇，等等膳殷。另外，與 DOM API 不同的是九火，jQuery 實現(xiàn)了復(fù)合模式（composite pattern）赚窃。正因為這一特點，你可以在一個 jQuery 集合中調(diào)用一些 jQuery 方法岔激，而不用擔(dān)心集合包含的元素數(shù)量（沒有勒极、只有一個或很多）。
隨著 jQuery 3 的發(fā)布鹦倚，jQuery 會到達(dá)一個重要的里程碑河质。該版本修復(fù)了很多 Bug，添加了一些新方法震叙，不建議采用或干脆清除了一批函數(shù)掀鹅，并改變了一些函數(shù)的行為。本文將重點介紹 jQuery 3 所帶來的一些關(guān)鍵改動媒楼。
1 新特性
下面就將逐條介紹 jQuery 所新增的一些關(guān)鍵特性乐尊。
1.1 for...of 循環(huán)
jQuery 3 現(xiàn)在允許利用 for... Of 來遍歷 jQuery 集合的 DOM 元素。這種新的迭代器是 ECMAScript 2015（也就是 ECMAScript 6）規(guī)范的一部分划址。它能實現(xiàn)對可遍歷對象（包括 Array扔嵌、Map、Set 等）的循環(huán)夺颤。
在使用這一新迭代器時痢缎，接收的值并不是每次訪問一個元素的 jQuery 集合，而是一個 DOM 元素世澜。這一迭代器稍微改變了對 jQuery 集合執(zhí)行操作的方式独旷。
下面舉例來介紹這種迭代器的工作原理。假設(shè)頁面上的每一 input 元素都需要指定一個 ID寥裂。jQuery 3 之前的做法是：
var $inputs = $('input');
for(var i = 0; i < $inputs.length; i++) {
$inputs[i].id = 'input-' + i;
}
到了 jQuery 3嵌洼，你只需這樣寫：
var $inputs = $('input');
var i = 0;
for(var input of $inputs) {
input.id = 'input-' + i++;
}
1.2 $.GET() 與 $.POST() 的新簽名
jQuery 3 為 $.get() 和 $.post() 這兩個工具函數(shù)添加了新的簽名，為的是跟 $.ajax() 對等封恰。新的簽名是這樣的：
$.get([settings])
$.post([settings])
settings 是一種能夠執(zhí)行很多屬性的對象麻养，和提供給 $.ajax() 的對象相同。關(guān)于詳細(xì)介紹诺舔，請參考 $.ajax() 頁面的內(nèi)容鳖昌。
跟傳遞對象給 $.ajax() 相比备畦，當(dāng)傳遞對象給 $.get() 和 $.post() 時，其唯一區(qū)別在于 method 屬性一直被忽略遗遵。原因在于 $.get() 和 $.post() 各有一種預(yù)設(shè)的 HTTP 方法來處理 Ajax 請求（$.get() 用 GET萍恕；$.post() 用 POST）。一般說來车要，不能用 $.get() 發(fā)送 POST 請求允粤。
考慮下面這段代碼：
$.get({
url: 'https://www.audero.it',
method: 'POST' // 該屬性被忽略
});
盡管有 method 屬性，該語句還是不能發(fā)送 POST 請求翼岁，只能發(fā)送 GET 請求类垫。
1.3 動畫可以使用 REQUESTANIMATIONFRAME()
所有現(xiàn)代的瀏覽器，包括 Internet Explorer 10 及更高版本琅坡，都支持 requestAnimationFrame悉患。而在這背后，jQuery 3 將在執(zhí)行動畫時使用該 API榆俺，從而實現(xiàn)動畫更平滑售躁，減少 CPU 的工作壓力。
1.4 UNWRAP()
jQuery 3 為 unwrap() 添加了可選的選擇器參數(shù)茴晋。這一方法的新簽名為：
unwrap([selector])
有了這一變動陪捷，就能將一個包含選擇器表達(dá)式的字符串傳入父元素進(jìn)行匹配查找。如果存在匹配诺擅，那么與之匹配的子元素將解包市袖，否則操作無法完成。
2 已更改的特性
下面是 jQuery 3 已經(jīng)調(diào)整了的一些特性行為烁涌。
2.1 :VISIBLE 和 :HIDDEN
新版 jQuery 更改了 :visible 與 :hidden 過濾器的含義苍碟。如果元素有布局框，包括那些寬度和/或高度為0的情況撮执，則元素被認(rèn)為是:visible微峰。比如說，br 元素和沒有內(nèi)容的內(nèi)聯(lián)元素將可以通過 :visible 過濾器進(jìn)行選擇抒钱。
所以县忌，假如頁面有如下標(biāo)記：
<div></div>
<br />
如果運行了下面語句：
console.log($('body :visible').length);
那么在 jQuery 1.x 和 2.x 時，結(jié)果是 0继效，而到了 jQuery 3，結(jié)果就是 2装获。
2.2 DATA()
另一改動就是跟 data() 方法的行為有關(guān)瑞信。調(diào)整主要是為了讓該方法符合 Dataset API 規(guī)范。jQuery 3 將所有屬性的鍵都改為駝峰式大小寫形式穴豫。先看下面這個例子凡简。
<div id="container"></div>
如果使用 3 之前的版本寫了下列代碼：
var $elem = $('#container');
$elem.data({
'my-property': 'hello'
});
console.log($elem.data());
控制臺上的結(jié)果如下：
{my-property: "hello"}
而在 jQuery 3逼友，結(jié)果為：
{myProperty: "hello"}
所以再次重申：jQuery 3 時，屬性名都是駝峰大小寫秤涩，沒有中間的短劃線（-）帜乞；而使用 3 之前的版本，則依然采用全部小寫字母的寫法筐眷，詞之間帶有短劃線黎烈。
2.3 Deferred 對象
jQuery 3 還改變了 Deferred 對象的行為（該對象是 Promise 對象的前身），改善了它與 Promise/A+ 提案的兼容性匀谣。該對象及其歷史非常有意思照棋，你可以讀讀官方文檔，也可以看看我寫的書 《jQuery 實戰(zhàn)武翎，第 3 版》中有關(guān) jQuery 3 的章節(jié)內(nèi)容烈炭。
在 jQuery 1.x 和 2.x 時，傳入 Deferred 中的回調(diào)函數(shù)中的一個未捕獲異常會導(dǎo)致程序停止執(zhí)行宝恶。與原生的 Promise 對象不同的是符隙，拋出異常會逐層傳播，直到它抵達(dá) window.onerror 為止（往往是這樣）垫毙。如果不能為該事件（雖然并不常見）定義一個函數(shù)霹疫，則會顯示異常消息，程序終止執(zhí)行露久。
jQuery 3 遵循原生的 Promise 對象的模式更米。因此，拋出的異常將被視為一個 rejection毫痕，從而執(zhí)行失敗回調(diào)征峦。完成之后，進(jìn)程繼續(xù)消请，繼續(xù)執(zhí)行后續(xù)的成功回調(diào)栏笆。
為了讓你理解這其中的差異，先來看一個小例子臊泰。如下所示：
var deferred = $.Deferred();
deferred
.then(function() {
throw new Error('An error');
})
.then(
function() {
console.log('Success 1');
},
function() {
console.log('Failure 1');
}
)
.then(
function() {
console.log('Success 2');
},
function() {
console.log('Failure 2');
}
);
deferred.resolve();
在 jQuery 1 和 jQuery 2 時蛉加，只執(zhí)行第一個函數(shù)（拋出錯誤的函數(shù)）。另外缸逃，因為沒有為 window.onerror 定義處理器针饥，所以控制臺將輸出消息：“Uncaught Error: An error”（未捕獲的錯誤：發(fā)生錯誤），程序不再繼續(xù)執(zhí)行需频。
而在 jQuery 3丁眼，行為則完全不同了，控制臺將顯示 “Failure 1” 和 “Success 2” 兩個消息昭殉。由第一個失敗的函數(shù)來管理異常苞七，一旦被處理藐守，則繼續(xù)執(zhí)行下面的成功函數(shù)。
2.4 SVG 文檔
jQuery 各個版本（包括 3）都沒有對 SVG 文檔有過官方的支持蹂风。但實際上很多方法都適用卢厂，另外一些方法，比如操作類名的方法惠啄，已經(jīng)在 jQuery 3 中進(jìn)行了更新慎恒，因此也適用。因此礁阁，在未來的版本中巧号，應(yīng)該可以使用 addClass() 和 hasClass() 這樣的方法處理 SVG 文檔，估計不會出現(xiàn)什么問題姥闭。
3 過時不建議采用與已清除的方法及屬性
除了前面說的改進(jìn)丹鸿，jQuery 3 還除去了一些方法和屬性，并且聲明了一批不建議采用的特性棚品。
3.1 不建議采用：BIND()靠欢、UNBIND()、DELEGATE() 和 UNDELEGATE()
不久前引入的 on() 方法代替了 jQuery 的 bind()铜跑、delegate() 以及 live() 方法门怪，提供了一種統(tǒng)一的訪問接口。與之類似锅纺，jQuery 用 off() 方法來代替 unbind()掷空、undelegated() 及 die() 方法。bind()囤锉、delegate()坦弟、unbind() 和 undelegate() 今后不建議使用，也不會再支持它們官地。
jQuery 3 將所有這些方法聲明為過時酿傍，并打算在未來版本中清除它們（有可能是 jQuery 4），所以今后一定要在項目中堅持使用 on() 和 off() 方法驱入，以便適應(yīng)將來的變化赤炒。
3.2 已清除的方法：LOAD()、UNLOAD() 和 ERROR()
jQuery 3 完全棄用了已被宣布為過時的方法：load()亏较、unload() 和 error()莺褒。這些方法已經(jīng)過時很長時間了（從 jQuery 1.8 起），但仍一直存在著雪情。如果某個插件依賴其中的一個或多個方法癣朗，那么更新到 jQuery 3 時，代碼就會出錯旺罢，因此一定要在更新時多注意一下這個問題旷余。
3.3 已清除的屬性：CONTEXT、SUPPORT 和 SELECTOR
jQuery 3 清除了 context扁达、support 和 selector 屬性正卧。如前所述，如果項目中仍然使用著這些屬性跪解，或者某個插件仍在依賴這些屬性炉旷，那么更新到 jQuery 3 時，代碼就會出錯叉讥。
4 修復(fù)的 Bug
jQuery 3 修復(fù)了前一版本的一些重大 Bug窘行。下面介紹兩個，此次修復(fù)將會對你的編碼產(chǎn)生重大影響图仓。
4.1 width() 和 height()
此次修復(fù)了 width() 和 height() 以及其他連帶方法中的 Bug罐盔。這些方法再也不會四舍五入到最近的像素了，因為在某些情況下救崔，這樣做很難定位元素惶看。
舉例來說明這一問題。假設(shè)寬度為 100 px 的 container 元素包含著 3 個子元素六孵。
<div class="container">
<div>My name</div>
<div>is</div>
<div>Aurelio De Rosa</div>
</div>
在 jQuery 3 之前的版本纬黎，獲取子元素寬度的代碼應(yīng)該是下面這樣吧？
$('.container div').width();
這樣一來劫窒，結(jié)果就是 33本今。因為當(dāng)時 jQuery 會將結(jié)果 33.33333 四舍五入。而在 jQuery 3 中主巍，這個 Bug 已經(jīng)得到修復(fù)冠息，你的結(jié)果會更精確（比如會得到浮點數(shù)）。
4.2 WRAPALL()
jQuery 3 還修復(fù)了一個將某個函數(shù)傳入 wrapAll() 方法時常會出現(xiàn)的 Bug煤禽。在 3 之前的版本中铐达，當(dāng)把某個函數(shù)傳入 wrapAll() 時，會將 jQuery 集合中的元素分別包裝檬果。換句話說瓮孙，它的行為表現(xiàn)得就像將函數(shù)傳入 wrap()。
除了修復(fù)這個問題外选脊，因為這種函數(shù)在 jQuery 3 中只會被調(diào)用一次杭抠，所以jQuery 集合元素的索引不可能被傳入。最后恳啥，該函數(shù)上下文（this）將指向 jQuery 集合中的第一個元素偏灿。
5 下載 jQuery 3 beta 1
如果此文讓你產(chǎn)生了興趣，你可以試試 jQuery 3 的第一個 beta 版钝的。通過下面兩個 URL 都可以下載到它翁垂。
- 未壓縮版本：https://code.jquery.com/jquery-3.0.0-beta1.js铆遭。
- 壓縮版本：https://code.jquery.com/jquery-3.0.0-beta1.min.js。
利用 npm 也可以下載它沿猜，命令如下：
npm install jquery@3.0.0-beta1
6 總結(jié)
許多人宣稱 jQuery 已死枚荣，認(rèn)為現(xiàn)代 Web 開發(fā)已經(jīng)不需要它了。但 jQuery 的開發(fā)仍在繼續(xù)啼肩，而且統(tǒng)計數(shù)字顯示橄妆，前100萬個網(wǎng)站中，采用這一技術(shù)的網(wǎng)站占到了 78.5%祈坠，從而駁斥了上述反對言論害碾。
本文只是列出了 jQuery 3 所帶來的一些主要改變。你可能會注意到赦拘，這一版本更新不會對已有項目產(chǎn)生太大的影響慌随，因為沒有引入太多破壞性的徹底變革。盡管如此另绩，仍然需要注意一些因素儒陨，比如 Deferred 對象的改進(jìn)。就像更新第三方依賴所經(jīng)常要面的那樣笋籽，對項目一定要做一個復(fù)查蹦漠，從而防止意外行為或功能崩潰的情況出現(xiàn)。
