w3ctech

jQuery 3.0以及兼容3.0的jQuery Alpha版本发布

jQuery 3.0以及兼容3.0的jQuery Alpha版本发布

距离我们上一次重大的jQuery版本发布已经过去很长时间啦,所以你理应得到它。因此我们非常高兴宣布jQuery 3.0 alpha的版本发布。
尽管发布的版本号已经到3.0,但是当我们谈论到(如何)升级已存在的代码,可以预期这些发布不会遇到太多的麻烦。事情确实如此,只是一些用来调整重要版本冲突的零碎改变,但是我们希望这些改变不会影响许多人。这个jQuery Migrate插件也可以帮助你(就是在你的代码中找出存在兼容性的问题的代码段)。在这个alpha版本中,针对这些零碎改变的反馈将会极大的帮助你自己,所以请在你的已有的代码或者插件中试验一下!
实际上这里有两次版本发布。第一个是jQuery 3.0,这个版本支持现代浏览器以及IE9以后的浏览器环境。第二个是jQuery 3.0兼容版,这个支持IE8.作为一个增加的福利,就是jQuery以及jQuery兼容版支持Yandex浏览器(在2012年发布的免费浏览器)。你可以从jQuery CDN或者直接通过这些链接获取jQuery以及jQuery兼容版:
https://code.jquery.com/jquery-3.0.0-alpha1.js
https://code.jquery.com/jquery-3.0.0-alpha1.js
你也可以通过npm获取jQuery alpha版本:
npm install jquery@3.0.0-alpha1
npm install jquery-compat@3.0.0-alpha1

主要的变化

这些发布中高亮的地方表示重要的新特性、代码的完善以及bug的修正。在这篇文章下面以及在Github上的GitHub issue tracker版块可以看到jQuery完整的零碎改变,此外你可以看到我们期待在下一个beta版本中添加的特性以及已经发布的最终版本。

简化.show()以及.hide()方法

每个人的内心都认为jQuery中的.hide()方法是(在CSS中)被用来设置display:none。相反的,.show()方法是用来清除display因此这个元素就可以重新出现啦(假定元素的父类元素没有被隐藏)。简单,这是正确吗?
不。这些年来,实际上存在很多复杂且特殊的例子,很多人希望我们可以修正一下,这些例子使得这些方法陷入复杂的原理集合之中。例如,如果一个元素在样式中设置成display:none将会怎样?jQuery试着直接在元素上强制添加display:block来覆盖以前的display属性。好的,如果一个类似<li>的普通块级元素通过不同的样式规则被设置成display:inline将会怎样?在一个元素被添加到document中操作之前你调用这些方法以及我们不知道这个元素所含有的display值的例子中会怎样?确定这些事例都要花费额外的工作。这仅仅只是一个猜想被证明是错误的。
既然这些方法可以向一个元素添加style属性,然而这些在响应式设计(元素的可见性可能需要通过媒体查询来设置)中不是常常表现的很好。这个导致jQuery处理器需要具有监听orientationchange或者resize事件以及人工隐藏或者显示部分页面的能力;jQuery击败媒体查询正在实现的优雅解决方案。
你可以看到jQuery只是完成了疯狂旅程上的一半路程,jQuery完成整个旅程是说不通的。这个事例以及检查不仅复杂且难以完成,而且在大的页面中会造成具有重大意义的性能事件。
所以,代替的是,我们正在实验性的反抗这些方法的演变,然后回归简单的、原生的模型。这个将会分解一些代码。如果你需要在元素的样式中设置成display:none,这个.show()方法不在覆盖display属性。因此加入到jQuery 3.0中最重要的规则:不要使用样式来设置display:none的默认值,然后尝试使用.show()-或者其它任何方法来显示元素,例如.slideDown()以及.fadeIn()-来使得该元素可见。
如果你需要一个元素的默认状态是隐藏的,最好的途径是:给元素增加一个类似"hidden"的样式名,然后去定义该样式名中的样式属性display: none。然后可以通过使用jQuery中的.addClass()方法以及.removeClass()方法分别增加和移除样式来控制可见性。另外一种做法是,在元素呈现在页面上之前,你可以使用ready处理器,然后在.ready()中调用.hide()方法。或这如果你一定要获取样式默认值,你可以使用.css("display","block")(或者合适的display值)来覆盖样式。
我们知道这可能是jQuery 3.0中最受争议和最困难的改变,所以我们想把这个改变放在早期的发布版本中看所带来的影响。请让我们知道这些改变如何影响你的代码以及你希望为了更好的使用新的版本所要做出的改变。
https://github.com/jquery/jquery/issues/1767
https://github.com/jquery/jquery/issues/2057
https://github.com/jquery/jquery/issues/2308

含有.data()名字的特殊事例

我们更新我们的.data()方法实现来更有效的匹配HTML5 dataset specification。所有的键名都是从kebab-case转换到驼峰式命名法,不管访问的方法以及数字不在参与转换。例如,我们不在区分"foo-bar"和"fooBar",但是区分"foo-42"和"foo42"。当通过调用无参数的.data()来重新获取所有的数据或者试着通过转换的键名(.data("foo42))而不是原始的(.data("foo-42"))这些变化开始起作用。
https://github.com/jquery/jquery/issues/1751

jQuery.Deferred兼容Promises/A+

jQuery.Deferred对象为了兼容Promises/A+以及ES2015 Promises已经进行了更新,Promises/A+ Compliance Test Suite证实。这就意味着.catch()介绍以及.then()方法一些重要的变化:

  • 在.then()抛出异常,现在回调函数变成一个注入的值。以前,异常一直往上冒泡,终止回调函数执行,然后进行锁定parent以及child Deferred对象不可逆操作。
  • 通过.then()创建Deferred的resolution状态现在是被它的回调函数控制-异常成为注入值以及non-thenable返回的结果成为fulfillment 值。以前,从注入的处理器变成了注入值返回。
  • 回调函数经常唤醒异步机制。以前,通过绑定以及resolution立即调用(无论哪个来得晚)。
  • Progress回调函数不再解决Deferred有界性的对象
    思考下面,哪个parent Deferred被注入以及child回调函数产生异常:

    var parent = jQuery.Deferred();
    var child = parent.then( null, function() { return "bar";
    });
    var callback = function( state ) {
    return function( value ) {
    console.log( state, value );
    throw new Error( "baz" );
    };
    };
    var grandchildren = [
    child.then( callback( "fulfilled" ), callback( "rejected" ) ),
    child.then( callback( "fulfilled" ), callback( "rejected" ) )
    ];
    parent.reject( "foo" );
    console.log( "parent resolved" );

作为jQuery3.0,在唤醒任何回调函数之前将会把"parent resolved"记入日志,每一个child回调函数将"fulfilled bar"记入日志,然后grandchildren则会和错误"baz"一起注入。在早些版本中,只会将"rejected bar"记入一次日志(child Deferred已经注入而不是fulfilled)然后通过未捕获到的错误"baz"中断("parent resolved"不再被记入日志以及grandchildren保留unresolved状态)。
当捕获异常时有利于在浏览器中进行debug,对于通过注入回调函数来处理异常非常具有陈述性。当与promises打交道时,记住将责任强加给你至少要增加一个注入回调函数。否则,任何错误都不会提示。
Legacy行为可以通过使用现在不宜用的.pipe()方法(具有签名认证)来代替.then()使用来重新获取。
jQuery.when为了接受任何thenable对象而进行更新,包括了原生的Promise对象。
https://github.com/jquery/jquery/issues/1722
https://github.com/jquery/jquery/issues/2102

在jQuery.ajax中移除特殊事例 Deferred方法

jqXHR对象是一个Promise,但是也有额外的类似.abort()方法,以便于你可以创建jqXHR后可以结束请求。
随着用户越来越推崇类似AJAX的Promise模式(出于异步的考虑),通过jQuery.ajax进行Promise返回特殊事例的想法是不好的。
成功、错误、完成
返回数据、失败、经常
记住,这些对于相同名字的回调函数没有任何影响,将会继续存在,而且不会被弃用。这个只会影响Promise方法!
https://github.com/jquery/jquery/issues/2084

错误事例不会默默地失败

也许在一个重要的时刻你在想,"窗口的偏移量是什么?"然后你可能就意识到这是个疯狂的问题-窗口怎么会有偏移量?
在过去,jQuery有时候试着创建类似返回something的事例而不是抛出异常。在这个询问窗口的偏移量的特殊事例,到现在为止,答案已经变成{top:0,left:0},由于jQuery 3.0 alpha版本,我们正在对抛出错误以便于疯狂的请求不能被安静的忽略的想法进行实验。
请尝试alpha版本然后看是否存在代码依赖jQuery出现无效输入的问题。
https://github.com/jquery/jquery/issues/1784

.width(),.height(),.css("width")以及.css("height")返回带小数点的数值(无论什么时候,浏览器都会这样做)

以前,当获取宽度和高度时,jQuery会对数值取整。一些浏览器会返回子像素值-例如IE和火狐-并且有时候,当布局依赖这些值时,用户需要这种精度的数值。我们不希望这些改变对你的代码有影响,但是如果确实影响你的代码,请让我们知道。
https://github.com/jquery/jquery/issues/1724

移除弃用的事件别名

.load,.unload,.error,自从jQuery 1.8后弃用,永不使用,使用.on()注册监听器。
https://github.com/jquery/jquery/issues/2286

jQuery.swap,jQuery.buildFragment和jQuery.domManip不再可以从jQuery对象中获取

这些方法常常是被用来仅供内部使用,而且没有文档说明。为了避免困惑,我们正将它们私有化。
https://github.com/jquery/jquery/issues/2224
https://github.com/jquery/jquery/issues/2225

动画现在使用requestAnimationFrame

除了IE8和IE9,越来越多的平台支持requestAnimationFrameAPI,当jQuery运行动画时,jQuery会使用这个API。使用API后导致动画会更加流畅以及更少的CPU时间,在移动设备上也节约电池。
jQuery尝试使用requestAnimationFrame 一些年头,但是一些已存在的代码还是有兼容性问题。所以我们收回了这些版本。我们认为我们通过这种方式(浏览器tab移出视野,我们将动画挂起)已经解决了大多数问题。仍然,任何依赖动画的代码运行在真实环境是在做一个不现实的假设。

.unwrap(selector)

在jQuery 3.0,.unwrap()方法不含有任何参数。selector参数提供确定哪个包装器被移除的方法。
https://github.com/jquery/jquery/issues/1744

对一些jQuery常规的选择器加速选择

多亏了Paul lrish在Google做的侦查工作,我们才可以确定一些在我们额外工作中遗漏事例(当一个常规的类似:visible的选择器在一个文档中使用多次)。特定的案例现在比以前快17倍!
记住,即使改善了,像:visible以及:hidden选择器代价还是蛮昂贵的,因为它们依赖浏览器来决定是否将元素显示在页面上。可能需要,最坏的情况,CSS样式重新计算以及页面布局重新渲染!尽管我们鼓励他们在许多情况下使用,我们还是推荐你们在你们的页面上测试来确定这些选择器是否造成性能事故。
https://github.com/jquery/jquery/issues/2042

前端圈微信

扫码关注前端圈微信公众号

共收到0条回复