jQuery 3.0十大新特性
jQuery 3.0在日前發(fā)布了最終的全新版本 。從2014年10月，jQuery團(tuán)隊(duì)對這個(gè)主要大版本進(jìn)行維護(hù)開始，web開發(fā)者社區(qū)便一直在期待著這一刻的到來，終于在2016年6月他們迎來了這一個(gè)最終版 。
通過jQuery 3.0的版本更新說明，我們看到了一個(gè)保持著向后兼容的更輕便，更快速的jQuery 。在本文中，我們將介紹一些令人眼前一亮的jQuery 3.0全新特性 。
開始前的說明
如果你想要下載jQuery 3.0進(jìn)行親自實(shí)驗(yàn) ， 可以通過 該頁面 進(jìn)行下載 。另外，升級指南 和 源代碼 也值得你一看 。
如果你想要測試一下你的項(xiàng)目如何在jQuery 3.0中工作的，你可以嘗試通過jQuery遷移插件 來識別代碼的兼容性問題，你也可以查看 jQuery未來發(fā)展的時(shí)間表。
1. 移除舊的IE工作區(qū)
新的最終版最主要的目標(biāo)是更加快速 ， 更加時(shí)尚，因此，那些支持早于IE9版本的相關(guān)技術(shù)與工作區(qū)都被移除了 。這意味著如果你想要或者需要支持IE6-8，你必須用回1.12版本，因?yàn)樯踔潦?.X版本都無法完整支持早于IE9的瀏覽器 。
注意：在jQuery 3中還棄用了一些其它的功能 。截止到2016年6月，升級指南還沒有提供一個(gè)對于棄用功能的分組整理 。因此 ， 你如果想要了解棄用功能，可以通過ctrl f鍵來進(jìn)行搜索 。
2. jQuery 3.0運(yùn)行在Strict Mode下
大多數(shù)支持jQuery 3的瀏覽器都支持strict mode ， 而在本次更新中對此進(jìn)行了規(guī)定 。
雖然jQuery 3是寫在strict mode中的，但是你需要了解的是你的代碼并不需要運(yùn)行在strict mode中，因此如果你想要把以前的代碼遷移到j(luò)Query 3，你不需要對已存在的jQuery代碼進(jìn)行重寫 。Strict和non-strict mode的JavaScript代碼可以和諧共存 。
這里有一些例外：某些版本的ASP.NET，因?yàn)閟trict mode的緣故，無法與jQuery 3兼容，如果你的代碼涉及到了ASP.NET，你可以查看 關(guān)于strict mode的細(xì)節(jié)。
3. 引進(jìn)for...of循環(huán)
jQuery 3支持for...of 語句 ， 這是由ECMAScript 6 中新引進(jìn)的一種for循環(huán)語句 。這提供了對 Arrays，Maps 和 Sets 這樣的可迭代對象一種更直接的遍歷方法 。
在jQuery中，for...of循環(huán)可以取代以前的 $.each(...) 語法，并且更容易通過jQuery的元素 集合 進(jìn)行循環(huán) 。
注意：for...of只能在支持ECMAScript 6的環(huán)境下或者使用Babel這樣的JavaScript編譯器下工作 。
4. 動(dòng)畫方面采用新的API
jQuery 3使用requestAnimationFrame() API來執(zhí)行動(dòng)畫，使動(dòng)畫運(yùn)行得更加順暢、快速 。新的API只用于支持它的瀏覽器 ， 對于那些更老的瀏覽器(如IE9)jQuery使用先前的API來作為顯示動(dòng)畫的后備方案 。
RequestAnimationFrame已經(jīng)推出一段時(shí)間了，如果你對如何使用它以及什么時(shí)候使用它感興趣，CSS Tricks上有一篇很好的 文章 可供你閱讀 。
5. 對包含特殊含義的字符串提供轉(zhuǎn)義的新方法
新的jQuery.escapeSelector()提供了對在CSS中存在特殊含義的字符串或字符進(jìn)行轉(zhuǎn)義的方法 ， 該方法可使這些字符串或字符能夠繼續(xù)用于jQuery選擇器中，而無需對那些無法進(jìn)行正確理解的JavaScript解釋器進(jìn)行轉(zhuǎn)義 。
這個(gè) 示例 可以讓你更好的了解這個(gè)全新的方法：
舉個(gè)例子，頁面中某個(gè)ID為 “abc.def” 的元素由于選擇器將其解析為 ID為“abc”且包含一個(gè)名為“def”的類的對象，而無法被$( "#abc.def" )選定 。但是它可以由 $( "#"$.escapeSelector( "abc.def" ) )來進(jìn)行選定 。
我無法確定發(fā)生中情況的頻率，但是假如你碰到過這種類似的情況，這無疑給了你一個(gè)解決該問題的簡單方法 。
6. 類操作方法支持SVG
不幸的是 ， jQuery 3現(xiàn)在還無法完整的支持SVG，但是對于 操作CSS類名稱 的jQuery方法 ， 如 .addClass() 和 .hasClass() 現(xiàn)在可以將SVG文檔作為目標(biāo) 。這意味著你可以修改(添加、刪除、切換)或者查找SVG(可縮放矢量圖形)下的jQuery類，然后使用CSS的類樣式 。( 相關(guān)閱讀：Styling Scalable Vector Graphic (SVG) with CSS )
7. 延遲對象現(xiàn)在與JS Promises兼容
JavaScript Promises，用于異步計(jì)算的對象，現(xiàn)在在ECMAScript 6中已經(jīng)被標(biāo)準(zhǔn)化;它們的運(yùn)行狀況和特性的詳細(xì)說明參見 Promises/A標(biāo)準(zhǔn) 。
在jQuery 3中 ， 延遲對象 已經(jīng)與新的Promises/A 標(biāo)準(zhǔn)相兼容 ， 延遲對象已經(jīng)成為讓創(chuàng)建回調(diào)隊(duì)列成為可能的可鏈對象(chainable objects) 。
新的特性改變了異步回調(diào)函數(shù)執(zhí)行過程，Promises允許開發(fā)者編寫在邏輯上與同步代碼更接近的異步代碼 。
查看升級指南的 代碼示例，或者查看關(guān)于JavaScript Promises基礎(chǔ)的 Scotch.io教程 可以讓你了解更多的信息 。
8. jQuery.when()對于多種參數(shù)的不同解讀
$.when() 提供了執(zhí)行回調(diào)函數(shù)的一種方法，它成為了jQuery 1.5之后的一部分 。這個(gè)方法非常靈活，它適用于零參數(shù) ， 也適用于一個(gè)或者多個(gè)作為參數(shù)的對象 。
jQuery 3改變了當(dāng)包含 $.then() 方法時(shí)對$.when()中參數(shù)的解讀方法，你可以對$.when()進(jìn)行額外的參數(shù)回調(diào) 。
在jQuery 3中，如果你在$.when()中的then()方法內(nèi)增加一個(gè)輸入?yún)?shù)，該參數(shù)將會(huì)被解釋成一個(gè)可與 Promise 兼容的 "thenable"。
這意味著 $.when方法能夠接收更加寬廣的輸入范圍 ， 比如原生的 ES6 Promises 和 Bluebird Promises ，這也使得編寫更復(fù)雜的異步回調(diào)成為了可能 。
9. 新的顯示/隱藏邏輯
為了增加響應(yīng)式設(shè)計(jì)的兼容性，與元素顯示和隱藏的代碼在jQuery 3中進(jìn)行了更新 。
從現(xiàn)在開始，.show() 、 .hide() 和 .toggle() 方法將會(huì)以內(nèi)聯(lián)樣式為重點(diǎn)取代以前的計(jì)算樣式，這種方式能夠更尊重樣式列表的改變 。
新的代碼盡可能的尊重樣式列表中所呈現(xiàn)的數(shù)值，這意味著CSS規(guī)則可根據(jù)事件(如設(shè)備重新定位和窗口尺寸調(diào)整)進(jìn)行動(dòng)態(tài)改變 。
這個(gè)說明文件申明了最重要的結(jié)果就是：
“作為結(jié)果，斷開連接的元素除非指定了內(nèi)聯(lián)display: none，否則將不再認(rèn)定為是隱藏的 。因此，在jQuery 3.0中，.toggle()不再對斷開連接元素與已連接元素進(jìn)行區(qū)分 。”
如果你想要更好的了解關(guān)于全新的顯示/隱藏邏輯，這個(gè) Github discussion 會(huì)對你有幫助 。jQuery開發(fā)者還發(fā)布了 Google文檔表 來展示在不同用例下新規(guī)則的運(yùn)轉(zhuǎn) 。
【jQuery 3.0十大新特性】10. 對于防止XSS攻擊的額外保護(hù)
jQuery 3增加一個(gè)額外的安全層用戶用于防備跨站點(diǎn)腳本(XSS)攻擊，它需要開發(fā)者指定 $.ajax() 和 $.get() 方法中的選項(xiàng)為dataType: "script" 。
換言之 ， 如果你想要執(zhí)行跨站點(diǎn)的腳本請求 ， 你必須在這些方法中作出這樣的聲明 。
新的改變對于當(dāng)“遠(yuǎn)程站點(diǎn)傳遞非腳本內(nèi)容之后又提供有惡意腳本的服務(wù)內(nèi)容”的情況是非常有效的 。這個(gè)變化不會(huì)影響$.getScript()方法，因?yàn)樗鞔_地設(shè)置了dataType: "script"選項(xiàng) 。
相關(guān)經(jīng)驗(yàn)推薦
- jQuery解決IE6、7、8不能使用 JSON.stringify 函數(shù)的問題
- jQuery獲取瀏覽器類型和版本號的方法
- jQuery實(shí)現(xiàn)最簡單的切換圖效果【可兼容IE6、火狐、谷歌、opera等】
- 基于jQuery1.9版本如何判斷瀏覽器版本類型
- 解決jQuery uploadify在非IE核心瀏覽器下無法上傳
- 詳解jQuery設(shè)置內(nèi)容和屬性
- 詳解jQuery中的getAll和cleanData()
- jQuery中實(shí)現(xiàn)text的方法
- 淘寶中領(lǐng)取紅包具體步驟
- iPadQQ3.0登陸AppStore PC同時(shí)登錄時(shí)會(huì)“禮讓”