jQuery3新特性

发表于 | 分类于 |

说明

  • 本文为翻译文章，原文在这里
  • 本文作者：Aurelio De Rosa
  • 本文总结了jQuery3新特性，作为jQuery开发者的参考

引言

  • jQuery影响网页开发已经有十年的时间，它一路走来源于它的诸多优势。 jQuery为用户提供了一个易于使用的与DOM交互方式，比如：执行Ajax请求，创建动画，等等。此外，不同于纯DOM的API，jQuery实现了复合模式。正因为如此，你在不用知道元素数量的前提下，可以方便调用一个jQuery集合或是一个jQuery方法。
  • 在未来的几个星期，一个重要的时间节点将要到来，jQuery将发布版本3，其中修复了很多的bug，增加了新的方法，弃用并删除了一些功能，改变了一些功能的行为。在这篇文章中，我将讲解jQuery3引入的最重要的变化。

新特性

  • 在下面的章节，我将讨论jQuery3中添加的最重要的特性。

FOR…OF LOOP

  • jQuery3将提供for…of 循环来遍历一个jQuery集合的DOM元素。这种新的迭代器是ECMAScript 2015（又名的ECMAScript6）规范的一部分。它可以让你方便的迭代对象（包括阵列，地图，设置，等等）。
  • 当使用这种新的迭代方式的时候，您会收到一个不是jQuery的集合，从中仅可以在同一时间访问一个DOM元素。这个迭代器将使你可以在一个jQuery集合执行操作的方式略有提升。
  • 为了理解这个迭代器是如何工作的，我们举个例子。比如你想分配一个ID给页面的每个输入元素。 jQuery的3之前你可以这样写：
1
2
3
4
var $inputs = $('input');
for(var i = 0; i < $inputs.length; i++) {
   $inputs[i].id = 'input-' + i;
}
  • 在jQuery3中可以这样写：
1
2
3
4
var $inputs = $('input');var i = 0; 
for(var input of $inputs) {
  input.id = 'input-' + i++;
}

$.GET() AND $.POST()的新属性

  • jQuery3增加了$.get()和$.post()的新属性，他们是ajax的具体实现。添加新的属性是：
1
2
$.get([settings])
$.post([settings])
  • setting是一个对象，可以拥有许多属性。你可以给$.ajax()提供相同的对象。要了解更多内容，请参阅$.ajax()。
  • 在给$.get()、$.post()传送对象和给$.ajax()传送对象的最大的区别是方法的属性始终被忽略掉。产生这种情况的原因是$.get()、$.post()对象有一个预设的HTTP方法来执行Ajax请求（GET方法对应$.get()、POST方法对应$.post()）。最基本的一个原则是，你不能尝试通过$.get()去发送POST请求。
1
2
3
4
$.get({
   url: 'https://www.audero.it',
   method: 'POST' // This property is ignored
});
  • 尽管显式设置了请求的方法为POST，这段代码仍将发出GET而非POST请求。

使用REQUESTANIMATIONFRAME()播放动画

  • 所有现代浏览器，包括Internet Explorer10及以上，都支持requestAnimationFrame。在实际操作中，jQuery3播放动画时，使用这个API将使得动画的播放更加平滑，而且消耗更少的CPU资源。

UNWRAP()

  • jQuery3对于unwrap()函数增加了一个可选的选择参数。该方法现在可以这么使用：
1
unwrap([selector])
  • 由于这种变化，你可以在unwrap函数中添加选择器。如果选择器存在匹配的DOM对象，则匹配的子元素是展开；否则，不进行操作。

未来的变化

  • jQuery3还修改了它的一些功能的行为。

VISIBLE 和 :HIDDEN

  • 新版的jQuery更改了:visible 和:hidden的含义，如果元素存在盒模型（包括那些宽度和高度为零的盒模型），这样的元素将被认为是:visible的。例如，
    元素和一些没有内容的行内元素在jQuery3中就会被:visible选择器选中。所以，如果您页面上结构如下：
1
2
<div></div>
<br />
  • 而且您写了如下的代码：
1
console.log($('body :visible').length);
  • 在jQuery1和jQuery2中，您将获取0，在jQuery3中，您将获得2.

DATA()

  • 另一个重要变化是关于data()方法的。它已被更改为符合 Dataset API specifications的方法。 jQuery3将所有属性的key值变更为camel case。要理解这种变化，请考虑以下代码：
1
<div id="container"></div>
  • 如果您使用的是jQuery3之前的版本，你可以这么写：
1
2
3
4
5
6
var $elem = $('#container');

$elem.data({
   'my-property': 'hello'});

console.log($elem.data());
  • 在控制台你将得到如下输出：
1
{my-property: "hello"}
  • 但是如果您使用jQuery3，将得到：
1
{myProperty: "hello"}
  • 注意，jQuery3属性的名称是camel case的，没有“-”符号，而以前的版本则有。

THE DEFERRED OBJECT

  • jQuery3改变了递延对象的行为，是Promise对象的先驱，以提高其与promise/ A+对象的兼容性。这个对象和它的历史是很有趣的。为了更多地了解它，你可以阅读官方文档或阅读我的书,涵盖jQuery3的知识点。
  • 在jQuery1.x和2.x中，回调函数中的未捕获异常被传递给一个异常中止程序的执行。不同于原生的Promise 对象，它会一层一层抛出异常，直到它达到window.onerror对象。如果你还没有为此函数定义事件（这是一种罕见的情况），异常消息会显示出来，程序流被终止。
  • jQuery3遵循和原生的Promise对象相同的模式。因此，引发的异常被转换成一个rejection 对象并且执行失败情况下的回调函数。一旦完成，该过程继续，并且随后执行成功情况下的回调函数。
  • 为了帮助您了解这种差异，让我们看一个小例子。考虑下面的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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();
  • 在jQuery1和jQuery2中，只有第一个函数（抛出异常的那个函数）被执行。另外，因为我们没有定义任何window.onerror的处理函数，控制台消息将输出“Uncaught Error: An error”，程序执行将中止。
  • 在jQuery3中，程序的行为是完全不同的。你会看到控制台消息显示“Failure 1”和“Success 2”。该异常由第一个失败处理函数来处理，一旦它已经被处理，接下来成功的函数可以被执行。

SVG 文件

  • 没有jQuery版本，包括jQuery3，正式支持SVG文件。然而事实是，许多方法都可以工作，比如那些操纵类名称的函数，已在jQuery3中被更新。因此，在这个即将到来的jQuery版本，你就可以使用SVG文档的方法，如addClass()和hasClass()方法。

方法和属性已过时或删除

  • 到目前我们介绍了jQuery3新增的功能，同时它也移除和弃用的几个功能。

  • 弃用 BIND(), UNBIND(), DELEGATE() UNDELEGATE()方法

    • on()方法以前曾经介绍过，是用来为提供一个统一的接口来代替jQuery的bind()、delegate()和 live()方法。同时，jQuery建议用off()提供的统一的接口来代替unbind(),undelegated()和die()方法。
    • jQuery3弃用了所有的这些方法，将来的版本也不会重新使用。请在你的项目中专注于使用on() 和off()。

  • 弃用LOAD(), UNLOAD() 和 ERROR()方法

    • jQuery3弃用了LOAD(), UNLOAD() 和 ERROR()方法。这些方法其实早在jQuery1.8中就被弃用了，但并未被绝对禁止使用。如果你正在使用依赖于一个或一个以上的这些方法，升级到jQuery3则会破坏你的代码的可用性。因此，在决定升级前要注意。

  • 弃用CONTEXT, SUPPORT 和 SELECTOR属性

    • jQuery3 弃用了context, support和 selector属性。正如我在上一节中提到的，如果你还在项目中使用它们，升级到jQuery3会破坏你的代码的可用性。

  • Bug的修正

    • jQuery3修复了以前版本中的一些重要的错误。在下面的部分，我将重点讲解两方面，这将使您的工作方式的巨大变化。

  • 对于 width() 和height()函数不会有更多的四舍五入

    • jQuery3修复了包括width()和height()等相关函数的bug。这些方法将不再舍入到最近的像素，这使得它在某些情况下难以定位。
    • 要理解这个问题，举例来说，你有一个有100像素宽的容器元素，分成三等份，每一份为宽度为整体的三分之一（即33.333333％）,在jQuery历史版本中，如果你要按照下面的代码获取每一份的宽度,你将会得到四舍五入后的宽度33像素。jQuery3中修复了这个bug，你将会得到一个浮点数。
1
2
3
4
5
div class="container">
   <div>My name</div>
   <div>is</div>
   <div>Aurelio De Rosa</div>
</div>
1
$('.container div').width();
  • WRAPALL()函数
    • jQuery的新版本修复了一个wrapAll()方法的错误。在jQuery3之前的版本中，当向wrapAll()传递函数时，它独立包装jQuery的集合中的元素。换句话说，它的行为和向wrap()传递函数作用相同。
    • 为了解决这个问题，因为函数被在jQuery3中仅仅被调用了1次，它没有通过jQuery的集合传递元素的索引。最后，函数上下文（this对象）将引用jQuery集合中的第一个元素。

下载jQuery3测试版本1

1
npm install jquery@3.0.0-beta1

结论

  • 很多人说，jQuery已死，现代Web开发不会用到jQuery了。然而，它的发展仍在继续，但其78.5％的使用率的统计结果违背了这些说法。
  • 在这篇文章中，我已经带您领略了jQuery3的新特性。正如您可能已经注意到，这个版本不会打破任何现有的项目，因为它不会引入许多重大更改。尽管如此，有一些更改在升级前需要牢记。第三方的依赖升级前，该项目的审查会帮助你发现任何异常行为或损坏的功能。

再次声明

  • 本文是这篇文章的翻译，作者是Aurelio De Rosa，译者是饮水思源。
  • 非常感谢作者分享jQuery3新特性，让我们对jQuery有了全新的认识和体验。
您的支持是对我最大的鼓励！