时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本。有两个版本 jQuery compat 3.0 和 jQuery 3.0。
- jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本
- jQuery 3.0 对应之前的 2.x,关注更新的浏览器,对于IE支持到 9.0 版本
此外, 3.0还增加了对 Yandex 浏览器的支持,一款来自俄罗斯的浏览器。
主要的变化
.show()
和 .hide()
方法的变动
<style type="text/css">
input {
display: none;
}
</style>
<script>
// 不会生效,因为`.show()` 和 `.hide()` 方法仅仅读取内联样式
$('input').show();
</script>
每个人的内心都认为jQuery中的.hide()方法是(在CSS中)被用来设置display:none。相反的,.show()方法是用来清除display因此这个元素就可以重新出现(假定元素的父类元素没有被隐藏)。这是正确吗?
不。这些年来,实际上存在很多复杂且特殊的例子,很多人希望我们可以修正一下,这些例子使得这些方法陷入复杂的原理集合之中。例如,如果一个元素在样式中设置成display:none将会怎样?jQuery试着直接在元素上强制添加display:block来覆盖以前的display属性。好的,如果一个类似 <li>
的普通块级元素通过不同的样式规则被设置成display:inline将会怎样?在一个元素被添加到document中操作之前你调用这些方法以及我们不知道这个元素所含有的display值的例子中会怎样?确定这些事例都要花费额外的工作。这仅仅只是一个猜想被证明是错误的。
既然这些方法可以向一个元素添加style属性,然而这些在响应式设计(元素的可见性可能需要通过媒体查询来设置)中不是常常表现的很好。这个导致jQuery处理器需要具有监听orientationchange或者resize事件以及人工隐藏或者显示部分页面的能力.
你可以看到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中最受争议和最困难的改变,所以我们想把这个改变放在早期的发布版本中看所带来的影响。请让我们知道这些改变如何影响你的代码以及你希望为了更好的使用新的版本所要做出的改变。
.data()方法的变动
我们更新我们的.data()方法实现来更有效的匹配 HTML5 dataset specification 。所有的键名都是从kebab-case转换到驼峰式命名法,不管访问的方法以及数字不在参与转换。例如,我们不在区分"foo-bar"和"fooBar",但是区分"foo-42"和"foo42"。当通过调用无参数的.data()来重新获取所有的数据或者试着通过转换的键名(.data("foo42))而不是原始的(.data("foo-42"))这些变化开始起作用。
<div data-foo-42="bar" data-foo-bar="bar"></div>
<script>
console.log($('div').data());
// {fooBar: "bar", foo-42: "bar"}
</script>
主要是$.camelCase
方法发生变动,里面的匹配连字符正则 变成了rdashAlpha = /-([a-z])/g,
,以前是 rdashAlpha = /-([\da-z])/gi
jQuery.Deferred
兼容Promise/A+ 以及 ES2005
为deferred对象增加了.catch()
方法作为.then(null, function rejcted)
的语法糖
$.ajax 对象删除了 success | error | complete 方法
这是因为 Promise/A 规范的推动,大家对 Promise 的使用越来越多,之前对应 Derferred 上的几个方法没有存在的必要了
$.ajax().success()
$.ajax().error()
$.ajax().complete()
** 对于$.ajax回调函数中的success、error、complete方法没有进行改动 **
错误事例不会默默地失败
也许在一个重要的时刻你在想,"窗口的偏移量是什么?"然后你可能就意识到这是个疯狂的问题-窗口怎么会有偏移量?
在过去,jQuery有时候试着创建类似返回something的事例而不是抛出异常。在这个询问窗口的偏移量的特殊事例,到现在为止,答案已经变成{top:0,left:0},由于jQuery 3.0 alpha版本,我们正在对抛出错误以便于疯狂的请求不能被安静的忽略的想法进行实验。
width/height,css(width) / css(height) 的返回值一律是十进制
之前部分浏览器特殊情况下返回浮点数。
移除了注册事件的快捷函数 load | unload | error
.load()
, .unload()
, .error()
事件的快捷注册方法在新版本中彻底移除,请使用.on
方法进行绑定