讓我們看看jQuery 3.0有什么新玩意

zsyzk 9年前發布 | 65K 次閱讀 jQuery Ajax框架

作為迄今為止最流行的 JavaScript 庫， jQuery 為無數的 Web 開發者帶來了福利。 jQuery 從 2006 年誕生至今，已經被許許多多的 Web 開發者運用在項目中，極大地方便了開發。

時間回到 2015 年 7 月， jQuery 3.0 發布了第一個測試版———這是長久以來的一次重要發布。讓我們一起來看看 jQuery 中有什么新的東東，能幫我們更愉快地玩耍。

show() 和 hide()

show() 和 hide() 這兩個函數的工作方式發生了重要的變化。 jQuery 這么做當然有他的理由。在過去，使用 hide() 會把元素的 CSS 屬性 display 設置為 none ，而使用 show() 會把這個元素清除。這么做就容易亂套。舉幾個例子：

  1. 如果一個元素的屬性設為了 display:inline ，而在另一個樣式表中想通過使用 show() 方法，把屬性變成 display:block ，這種做法會破壞代碼。
  2. 當我們設計響應式網站，進行媒體查詢時，可能會通過使用 display 或者 visibility 屬性來控制元素是否可見。這么做也會干擾 show() 和 hide() 方法。

除了以上說的這兩個以外，還能舉出很多 jQuery 團隊不得不填這個坑的例子。惡果就是運行效率下降、性能低下，所以 jQuery 團隊推出了一種簡單的模型。

這樣一來，一旦把元素設置成 display:none ，那么不管接下來你使用什么方法， show() 、 slideDown() 、 fadeIn() 還是其它類似的方法，你都沒法讓這個元素顯示出來。控制元素可見性的最好方法是使用 addClass() 和 removeClass() 方法。或者我們也可以在調用 ready() 的期間，調用元素的 hide() 方法。

用簡單的例子說明一下：

<!DOCTYPE HTML>
<html>
    <head>
    <style>
        .invisible{
            display: none;
        }
        .visible{
            background-color: deepskyblue;
            display:block;
        }
    </style>
    <script src="jquery-3.0.0-beta1.js"></script>
    <script>
        $(document).ready(function(){
            $("#div1").addClass("invisible");
            $("#toggle").click(function(){
                $("#div1").removeClass("visible");
                $("#div1").addClass("invisible");
            });
        });
    </script>
    <title>Control Visibility</title>
    </head>
    <body>
        <p>Hello!</p>
        <divid="div1">Can you see this?</div>
        <buttonid="toggle">Click me</button>
    </body>    
</html>

讓我們看看jQuery 3.0有什么新玩意

.data() 的關鍵字命名

為了順應 HTML5 數據集合的標準，jQuery 團隊 改變了 .data() 的運行機制。如果 data-* 屬性中的關鍵字中包含數字的話，這個數字不再參與轉化。看看下面這個例子：

在 jQuery 2.1.4 中 :

控制臺并沒有顯示出這個對象。

在 jQuery 3.0.0 中 :

由于數字不再轉化成駝峰表示，所以關鍵字被轉化成了 foo-42-name ，控制臺輸出了結果。可以在 fiddle 上觀看演示 http://jsfiddle.net/nWCKt/25/ 。你可以改變 jQuery 版本，看看結果有什么不同。

同樣道理，如果想通過不帶參數的 data() 方法來顯示所有的 data 內容的話，我們發現如果在 data-* 屬性中的關鍵名中，短線“-”后緊跟著一個數字的話，新舊版本的 jQuery 中參數的個數是不同的，正如上面的例子。

HTML:

<divdata-foo-42-name="namebar" data-foo-42-yes="yesbar"></div>

JavaScript:

var div = $('div');
console.log(div.data());

在 jQuery 3.0中，會顯示對象{foo-42Name: “namebar”, foo-42Yes: “yesbar”}。但是在之前的版本中則只顯示一個空的對象{}。

部分瀏覽器會返回 width 和 height 的像素值。現在不論是 .width() , .height() , .css(“width”) , 還是 .css(“height”) ，只要是支持的瀏覽器， jQuery 都將返回十進制數。對于一直使用像素值設計網頁的朋友們，可謂一件值得慶幸的好消息。

去掉了 .load()、 .unload() 和 .error() 方法

這些方法早都是老掉牙過時的了，現在終于從 jQuery 3.0.0 測試版中移除了。推薦做法是使用 .on() 方法來處理相應的事件。舉一個簡單的例子：

HTML:

<imgsrc="space-needle.png" alt="Space Needle" id="spacen">

老掉牙的做法（現在已經拋棄了這種做法）

$( "#spacen" ).load(function() {
      // Handler implementation
    });

現在推薦的做法：

$( "#spacen" ).on( "load", function() {
        // Handler implementation
    });

jQuery 對象終于支持迭代了

從現在起，你可以用 ES2015 中的 for-of 對 jQuery 對象進行迭代。所以，你可以寫出這樣的代碼：

for ( nodeof $( "<div id=spacen>" ) ) {
  console.log( node.id ); // Returns ‘spacen’
}

(源代碼請戳 這里 )

jQuery 動畫現在在后臺使用 requestAnimationFrame API

所有的現代瀏覽器現在都支持 requestAnimationFrame (詳見: http://caniuse.com/#search=requestAnimationFrame )。由于 requestAnimationFrame 的普及度如此之廣，jQuery 使用這個 API 來執行動畫操作。它的優點包括支持更平滑的動畫和更少的 CPU 密集型動畫（也就是說能節省移動設備的電量）。

.unwrap() 方法的增強

.unwrap() 方法可以讓你移除 DOM 中匹配元素的父節點，但這個方法在以前都不能接收參數。如果想基于父節點的條件來執行 .unwrap() 的話，就會遇到麻煩。

在 jQuery 3.0.0 測試版中， jQuery 3.0.0 alpha能接受 jQuery 選擇器的參數，這個問題也就迎刃而解了。

將 jQuery.Deferred 更新成可兼容 Promises/A+

promise 是一個異步操作的的最終結果 —— 它指的是這樣一個對象，它能保證在將來產生一個結果。和 promise 互動的主要方式是通過 then 方法，then 方法注冊了回調函數。在 JavaScript 中使用 Promise 來實現異步已經變得越來越流行。Promises/A+ 是交互的 JavaScript promises 的一個開放標準。（更多詳細信息，請戳這里： https://promisesaplus.com/ ）

在 jQuery 文件中， Deferred 對象是一個可鏈接適用對象，通過調用 jQuery.Deferred() 方法創建。它能注冊多個回調函數到回調隊列中，引發回調隊列，并能傳遞每個同步或異步函數的成果獲失敗狀態。在 jquery 3.0.0 測試版中，更新了 jQuery.Deferred 對象，來兼容 Promises/A+ 和 ES2015 Promises。所以， .then() 方法也有了重大的變化。

更好的錯誤處理能力

這版的 jQuery 能更好地處理錯誤事例 —— 被忽略的不正確的請求，拋出錯誤。

比如：根據相關標準文件， offset 屬性代表了匹配元素中第一個元素的坐標。如果你想獲取 window 的 offest 屬性值的話，老版本的 jQuery 回返回結果 {top: 0, left: 0} ，并沒有報錯。但是我們知道 window 的 offset 屬性本身是沒意義的。所以在 3.0 測試版中，更正了這個錯誤，獲取 window 的 offest 屬性值的話就會報錯

另外一個例子： $("#") 現在會報錯，而不再是返回一個長度為 0 的集合。

定制選擇器（ 比如:visible）速度的大幅度提升

在 DOM 中多次使用 :visible 等等選擇器的性能已經有了很大的提升。這其實是緩存發揮了作用 —— 所以在第一處使用選擇器的地方，性能并沒有提升。但是，在后面每個調用選擇器的地方，性能都得到了巨大的提升，緩存在這里發揮著功不可沒的作用。 jQuery 團隊的 Timmy Willison 指出 由于緩存的作用， :visible 選擇器性能提升了大約 17 倍。

以上都是新版中的重要更新。完整的更新列表請參見官方博客： http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ 。

下載新版本的途徑

本次發布了兩個版本：

  1. jQuery 3.0, 支持現代瀏覽器 : https://code.jquery.com/jquery-3.0.0-alpha1.js
  2. jQuery Compat 3.0, 還能兼容支持 IE8 : https://code.jquery.com/jquery-compat-3.0.0-alpha1.js

同時也可以通過 npm 安裝

安裝指令：

npminstalljquery@3.0.0-alpha1
npminstalljquery-compat@3.0.0-alpha1

歡迎試用新版本，可以在 https://github.com/jquery/jquery 網站反饋信息。真的值得一用哦！

Web 開發的更多實戰

本文屬于本文屬于微軟公司 web 開發系列文章，該系列關注實踐 JavaScript 學習、開源項目以及 Microsoft Edge 瀏覽器和新版 EdgeHTML 渲染引擎 的最佳互操作實踐。

我們歡迎你在裝有 Microsoft Edge 的瀏覽器和設備上測試 —— Microsoft Edge 是 Windows 10 的默認瀏覽器， dev.microsoftedge.com 網站提供了許多相關的免費工具：

更多深入的學習請移步大神們的文章：

我們社區的開源項目:

更多的免費工具和后端 web 開發工具：

 

來自： http://web.jobbole.com/86316/

 

 本文由用戶 zsyzk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！