距离我们发布一个主要版本已经很久了,你理应得到一个。所以我们很高兴地宣布 jQuery 3.0 的第一个 alpha 版本!
尽管版本号是 3.0,我们预计这些版本在升级现有代码时不会带来太多麻烦。是的,有一些重大变更,这证明了主要版本的提升是合理的,但我们希望这些破坏性变更不会影响太多人。 jQuery Migrate 插件 也可以帮助你识别代码中的兼容性问题。你对这个 alpha 版本的变更的反馈将对我们有很大帮助,所以请尝试在你的现有代码和插件上使用它!
实际上,这里有两个版本。第一个是 jQuery 3.0,它支持现代浏览器和从 IE9 开始的环境。第二个是 jQuery Compat 3.0,它包含对 IE8 的支持。作为额外的奖励,jQuery 和 jQuery Compat 都将包含对 Yandex.Browser 的支持,这是一款于 2012 年发布的一款免费浏览器。你可以从 jQuery CDN 获取文件,或者直接链接到它们
https://code.jqueryjs.cn/jquery-3.0.0-alpha1.js
https://code.jqueryjs.cn/jquery-compat-3.0.0-alpha1.js
你也可以从 npm 获取 alpha 版本
npm install jquery@3.0.0-alpha1
npm install jquery-compat@3.0.0-alpha1
主要变更
以下只是这些版本中主要的新特性、改进和错误修复的亮点。完整的变更列表可在本文末尾和我们的 GitHub issue tracker 上找到。在 GitHub 上,你还可以看到我们预计在后续 beta 和最终版本中实现的功能,这些功能尚未实现。
简化了 .show() 和 .hide() 方法
每个人对 jQuery 的 .hide() 方法的心理模型是,它在 CSS 中设置 display: none。相反,.show() 清除 display,以便元素再次显示(假设其父元素没有被隐藏)。很简单,对吧?
好吧,不是的。实际上,多年来,人们要求我们“修复”许多复杂的特殊情况,这使得这些方法变成了一个复杂的原则融合体。例如,如果元素在样式表中设置为 display: none 怎么办?jQuery 会尝试通过直接强制元素设置为 display: block 来覆盖它。好的,但是如果像 <li> 这样的通常为 block 元素的元素被不同的样式表规则设置为 display: inline 怎么办?又比如,你在元素添加到文档之前调用这些方法,而我们不知道它将具有什么 display 值的情况呢?确定所有这些需要额外的工作。有时这仍然只是一个错误的猜测。
由于这些方法向元素添加了 style 属性,因此它们不太容易与响应式设计等技术配合使用,在响应式设计中,元素的可见性也可以由媒体查询设置。这导致需要 jQuery 处理程序来监听 orientationchange 或 resize 事件,并手动隐藏或显示页面的某些部分;这破坏了媒体查询试图实现的优雅解决方案。
你可以看到 jQuery 已经走到了通往彻底疯狂的道路上,完成这段旅程没有意义。这些特殊情况和检查不仅复杂且不完整,而且会导致大型页面出现严重的性能问题。
因此,我们尝试性地违背这些方法的演进,并恢复到一个简单、原始的模型。这将破坏一些代码。如果你的样式表中存在设置为 display: none 的元素,则 .show() 方法将不再覆盖它。因此,迁移到 jQuery 3.0 的最重要的规则是:不要使用样式表将默认值设置为 display: none,然后尝试使用 .show() – 或任何显示元素的方法,例如 .slideDown() 和 .fadeIn() – 来使其可见。
如果需要默认隐藏元素,最好的方法是向元素添加一个类名,例如“hidden”,并在样式表中将该类定义为 display: none。然后,你可以使用 jQuery 的 .addClass() 和 .removeClass() 方法添加或删除该类来控制可见性。或者,你可以在 .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 规范。现在所有键都从 kebab-case 转换为 camelCase,无论访问方法如何,并且数字不再参与转换。例如,我们不再区分 “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() 回调中抛出的异常现在将成为拒绝值。 以前,异常会一直冒泡,中止回调执行并不可逆地锁定父级和子级 Deferred 对象。
- 由
.then() 创建的 Deferred 的解析状态现在由其回调控制——异常成为拒绝值,而非 thenable 的返回值成为完成值。 以前,拒绝处理程序中的返回值会成为拒绝值。
- 回调始终异步调用。 以前,它们会在绑定或解析时立即调用,以两者中较晚者为准。
- 进度回调函数不再能解析与其绑定的 Deferred 对象。
考虑以下示例,其中父级 Deferred 被拒绝,并且子级回调会生成一个异常
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" );
从 jQuery 3.0 开始,这将首先记录“parent resolved”,然后调用任何回调,每个子级回调将记录“fulfilled bar”,并且孙级对象将使用 Error “baz” 被拒绝。 在以前的版本中,它会记录“rejected bar”(子级 Deferred 被拒绝而不是完成)一次,然后立即以未捕获的 Error “baz” 终止(未记录“parent resolved”,并且孙级对象未解析)。
虽然捕获异常对于浏览器内调试具有优势,但使用拒绝回调来处理它们更具声明性(即明确性)。 请记住,这意味着您有责任始终为使用 promise 时添加至少一个拒绝回调。 否则,任何错误都将被忽略。
可以通过使用现在已弃用的 .pipe() 方法(其具有相同的签名)来恢复旧行为。
jQuery.when 也已更新为接受任何 thenable 对象,其中包括本机 Promise 对象。
https://github.com/jquery/jquery/issues/1722
https://github.com/jquery/jquery/issues/2102
移除了 jQuery.ajax 中的特殊 Deferred 方法
jqXHR 对象是一个 Promise,但也有额外的像 .abort() 这样的方法,以便你可以在请求发出后停止它。
随着用户越来越多地采用 Promise 模式进行异步工作,例如 AJAX,对 jQuery.ajax 返回的 Promise 进行特殊处理的想法越来越糟糕。
success, error, complete
done, fail, always
请注意,这不会对同名的回调产生任何影响,这些回调仍然存在并且不会被弃用。这只会影响 Promise 方法!
https://github.com/jquery/jquery/issues/2084
错误案例不会静默失败
也许在某个深刻的时刻,您会想知道:“窗口的偏移量是多少?” 然后您可能意识到这是一个疯狂的问题——窗口怎么可能拥有偏移量?
在过去,jQuery 有时会尝试使像这样的一些情况返回某些内容,而不是抛出错误。在这种情况下,请求窗口的偏移量,到目前为止的答案一直是 { 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 和 Firefox——有时用户在依赖这些值进行布局时需要这种精度。我们预计此更改不会对您的代码产生重大影响,但如果产生影响,请告知我们。
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
在支持 requestAnimationFrame API 的平台上,几乎所有平台(IE8 和 IE9 除外)都支持该 API,jQuery 现在将在执行动画时使用该 API。这应该会产生更流畅的动画,并减少 CPU 时间的使用 – 并且还可以节省移动设备的电池电量。
jQuery 几年前尝试使用 requestAnimationFrame,但与现有代码存在 严重的兼容性问题,因此我们不得不将其回滚。 我们认为我们已经通过在浏览器选项卡不可见时暂停动画解决了大多数这些问题。 尽管如此,任何依赖于动画始终以近乎实时运行的代码都在做出不切实际的假设。
.unwrap( selector )
在 jQuery 3.0 之前,.unwrap() 方法不接受任何参数。selector 参数提供了一种指定要删除哪些包装器的途径。
https://github.com/jquery/jquery/issues/1744
某些 jQuery 自定义选择器的速度大幅提升
感谢 Google 的 Paul Irish 的侦探工作,我们确定了一些可以跳过大量额外工作的情况,当在同一文档中使用像 :visible 这样的自定义选择器多次时。 该特定案例现在快了 17 倍!
请记住,即使有了这项改进,像 :visible 和 :hidden 这样的选择器也可能很昂贵,因为它们依赖于浏览器来确定元素是否实际显示在页面上。 在最坏的情况下,这可能需要完全重新计算 CSS 样式和页面布局! 虽然我们通常不阻止使用它们,但我们建议测试您的页面,以确定这些选择器是否会导致性能问题。
https://github.com/jquery/jquery/issues/2042
感谢
感谢所有参与本次发布的人员,包括测试、报告错误或提交补丁的贡献者,例如 Chris Antaki, Jason Bedard, Leonardo Braga, Bastian Buchholz, Anne-Gaelle Colom, David Corbacho, Brenard Cubacub, Hamish Dickson, Ben Edelman, Stephen Edgar, elas7, flexphperia, Corey Frang, Xue Fuqiao, Oleg Gaidarenko, Richard Gibson, Michał Gołębiowski, Scott González, goob, Veaceslav Grimalschi, Mu Haibao, Dan Hart, Frederic Hemberger, Nicolas Henry, Daniel Herman, Jon Hester, Victor Homyakov, Winston Howes, Daniel Husar, Essam Al Joubori, Veres Lajos, George Mauer, Richard McDaniel, Amit Merchant, Calvin Metcalf, Dave Methvin, MightyBranch, Nazar Mokrynskyi, Matthew Mueller, Martin Naumann, Alexander O’Mara, Randson Oliveira, Gilad Peleg, James Pearce, PJ, Senya Pugach, Aditya Raghavan, Chris Rebert, Aurelio De Rosa, Gabriel Schulhof, Mike Sidorov, Nick Stefan, Arthur Stolyar, Timo Tijhof, Ben Toews, Thomas Tortorini, Shivaji Varma, Arthur Verschaeve, Rick Waldron, Bin Xin, Imran M Yousuf, Jörn Zaefferer。
更改
这是自上次官方发布(1.11.3 和 2.1.4)以来的所有更改列表
jQuery 和 jQuery Compat 共用
Ajax
属性
构建
Callbacks
核心
- 返回空数组而不是 null 用于 parseHTML(“”) (#1997, 4116914)
- 在 jQuery.parseHTML 中使用 document.implemenation.createHTMLDocument (58c2460)
- 遵循 AMD 规范来定义 (892625b)
- 在 $(“#”) 上抛出错误,而不是返回 0 长度的集合 (80022c8)
- 允许 init 接受用于 migrate 的替代根 jQuery (#2101, 7a6931d)
- 移除不必要的 createHTMLDocument 支持测试 (5923282)
- 将空字符串传递给 createHTMLDocument 以安抚 IE (31c7d7f)
- 恢复添加 createHTMLDocument。感谢 Safari 8。(b779831)
- 更新测试的 jsdom,移除过时的解决方法 (#2153, 06f6cd1)
- 重新引入 parseHTML 中的 createHTMLDocument;Safari 8 遗漏了 (cfe468f)
- 标准化 indexOf 比较 (53aa87f)
- 移除自定义 ready 事件 (#2264, c252c5f)
- 始终使用本地引用访问() (2fb719e)
- 移除已弃用的 context 和 selector 属性 (#1908, 0ea8c32)
- 移除节点上的 isArraylike 检查 (#2238, 436f0ae)
- 添加对带连字符的元素的支持 (534f130)
- 使用 window.setTimeout 和朋友而不是全局等效项 (#2177, 219c749)
- 移除 size 和 andSelf 方法 (#1749, f110360)
- 移除 strundefined 变量 (29838b6)
- 使 jQuery 对象可迭代 (#1693, bb026fc)
- 添加对 isArrayLike 中 iOS JIT 错误的解决方法 (#2145, 1541664)
- 测试 intro.js 中的所有工厂用例 (#2181, ab40725)
- 切换到仅使用 window.setTimeout 等模块 (842958e)
- 对齐分支:移除未使用的变量,添加注释 (f6de5a9)
- 简化“each”样式表迭代测试 (fcb6c4d)
- 简化并加速 .each (eeda11c)
- 组织 prop 和 attr 代码以保持相似 (5153b53)
- 更改 jQuery.each 和 jQuery#each 签名 (#2090, 2380028)
CSS
- CSS:Event: 简化本机方法签名 (85577a3)
- 修复“理智检查”测试 (995f707)
- 移除非功能性的负边距单元测试 (4ab7431)
- 添加针对 issue gh-1764 的集成测试 (8887106)
- 移除对 getDefaultComputedStyle 的使用 (#15227, 274feb5)
- 为 html 和 body 使用预定义的显示 (a772418)
- 更正注释中的错别字 (7e09619)
- 移除注释中多余的“到数字” (895ea68)
- 修复 :visible/:hidden 选择器对于带有内容的内联元素 (#2227, 79bcb29)
- 支持任何适用单位的相对调整 (#1711, 9b03f6d)
- 当 offsetWidth 或 offsetHeight 为零时,元素被隐藏 (#10406, #13132, 10399dd)
- 忽略 show()/hide()/etc. 中的 CSS 级联 (#1767, #2071, 86419b1)
- 修复 Android 2.3 中的 pixelMarginRight 支持测试 (cdfc2d0)
- 清理 reliableMarginRight 中的内存泄漏 (#1795, 7d15b4d)
- 不要缓存未识别的 CSS 属性名称 (#2015, d471842)
- 不要命名匿名交换函数 (0019a46)
- 使 getStyles 函数更具可读性 (3a0d582)
- 解决 IE11 全屏尺寸错误 (#1764, 90d828b)
- 添加针对负边距和定位的单元测试 (1b932bb)
- 简化“defaultDisplay”模块 (c62486f)
- 使 .css(“width”) 和 .css(“height”) 返回小数 (#1724, b60b26e)
- 不要暴露 jQuery.swap (#2058, bb4d888)
- 改进解释 IE11 全屏错误的注释 (8e4aac8)
数据
Deferred
Dimensions
文档
Effects
活动
操作
- 改进 data-URI 的测试 (dd596cc)
- 为带有连字符的标签元素添加支持 (#1987, 85ffc6d)
- 移除 remove 方法的内部参数 (#2301, 349edbd)
- 私有化 buildFragment() 函数 (#2224, a74320f)
- 不要自动插入 tbody (#1835, e984d1c)
- 支持 data-URI 脚本插入 (#1887, 15f4dec)
- 检测 sneaky 无内容的 replaceWith input (#2204, 4b27ae1)
- 创建一个 HTML 拦截点 (#1747, 225bde3)
- 增加 data-URI 测试的延迟 (#1993, 4fae911)
- 私有化内部 domManip() 函数 (#2225, 62d5579)
- 简化 html 包装器 (#2002, 0ea342a)
- 使 wrapAll funarg 只执行一次 (#1843, 359b03c)
其他
Offset
README
发布
选择器/Sizzle
支持
Tests
Wrap
jQuery 3.0 Only
Ajax
构建
CSS
数据
文档
操作
其他
- 调整注释和文档以删除 IE * 杂项:更新所有对 bugs.jquery.com 的引用 (#1681, 3e89a53)
- 移除测试中多余的 -moz-box-sizing (e81b258)
Offset
- 简化了一个条件 (4287442)
- 不要在移动 Safari 中运行 scrollTop/scrollLeft iframe 测试 (4ab8603)
README
- 添加 selector-native.js 链接。感谢 @randsonjs! (cfe2eae)
Tests
jQuery Compat 3.0 only
Ajax
属性
构建
Callbacks
- 更改损坏的 URL 为 wayback 上的 URL (e4cbc97)
核心
- 使 intro.js 中的代码与 master 对齐 (fe2a584)
CSS
数据
- 使用 removeAttribute 在 cleanData 中绕过 Chrome 错误 (#1664, 9d1d90e)
Deferred
文档
Effects
活动
操作
其他
Offset
- 允许 offset setter 对断开连接的元素抛出异常 (#2114, dc49f62)
- getBounding 在 IE8 中不返回 width/height。修复测试。(3b1de11)
- 修复 IE8 的 iframe scrollTop/Left 测试 (d632699)
- 修复 IE8 和 iPhone 的 iframe scrollTop/Left 测试 (62a333e)
- 为了 IE8 的缘故,恢复使用 jQuery.contains (仅限 compat) (6df3990)
- 无需检查 ownerDocument (523de77)
Tests
- 恢复 IE8 解决方法(Sinon 定时器用于 IE 和 HTML5 shiv)(0b07c65)
Traversing