大家好,欢迎来到IT知识分享网。
大家好,很高兴又见面了,我是”高级前端进阶“,由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
前言
jQuery v3.7.0 已发布,此版本包含众多内容更新,比如:错误修复、新方法和性能改进。 jQuery v3.7.0 放弃了长期使用的选择器引擎 Sizzle,同时将它移到了 jQuery 核心中,从而有助于为未来 jQuery 版本选择的进一步变更做好准备。 但这个技术方案确实使得 jQuery 减少了几个字节的体积,因为 Sizzle 需要支持比 jQuery 更旧的浏览器。
像往常一样,该版本可在 cdn 和 npm 包管理器上下载安装, 其他第三方 CDN 很快也会集成但可能需要一定的时间。
jQuery v3.7.0 新特性
新方法.uniqueSort()
一些 API,如 .prevAll()以相反的顺序返回元素,这在与包装方法一起使用时可能会导致一些令人困惑的行为。 例如,
$elem.prevAll().wrapAll('<p/>');
上面的代码会按预期包装所有元素,但会以相反的顺序将这些元素写入 DOM。 为了防止破坏现有代码的方式解决这个问题,jQuery 记录了 .prevAll() 和类似方法返回倒序集合,这在许多情况下仍然是可取的。 同时 jQuery v3.7.0 还添加了一个新方法,如 .uniqueSort(),该方法与 jQuery.uniqueSort()行为类似。
因此,之前的示例将变为:
$elem.prevAll().uniqueSort().wrapAll('<p/>');
并且 DOM 中的元素顺序将保持不变。
添加了一些无单位的 CSS 属性
jQuery 3.7.0 添加了对更多 CSS 属性的支持,这些属性在没有单位的情况下不应自动添加“px”。 例如.css(‘aspect-ratio’, 5) 会导致 CSS aspect-ratio: 5px;,这次更改很多都来自于 React 的启发。
export const isUnitlessNumber = { animationIterationCount: true, aspectRatio: true, borderImageOutset: true, borderImageSlice: true, borderImageWidth: true, boxFlex: true, boxFlexGroup: true, boxOrdinalGroup: true, columnCount: true, columns: true, flex: true, flexGrow: true, flexPositive: true, flexShrink: true, flexNegative: true, flexOrder: true, gridArea: true, gridRow: true, gridRowEnd: true, gridRowSpan: true, gridRowStart: true, gridColumn: true, gridColumnEnd: true, gridColumnSpan: true, gridColumnStart: true, fontWeight: true, lineClamp: true, lineHeight: true, opacity: true, order: true, orphans: true, scale: true, tabSize: true, widows: true, zIndex: true, zoom: true, // SVG-related properties fillOpacity: true, floodOpacity: true, stopOpacity: true, strokeDasharray: true, strokeDashoffset: true, strokeMiterlimit: true, strokeOpacity: true, strokeWidth: true, };
值得注意的是,jQuery v4.0 将改变处理无单位 CSS 属性的方式,不是依赖 CSS 属性列表来避免添加“px”,而是有一个属性列表,当没有传递任何单位时,肯定要添加“px”, 那样更具前瞻性。
操作性能提升
jQuery 3.7.0 在使用 .append() 等操作方法时为某些用例带来了可衡量的性能改进。 当删除不再支持的浏览器的支持测试时,这意味着根本不再需要运行针对文档更改的检查。
从本质上讲,这导致了 0% 到 100% 之间的任何加速。 最显著的加速出现在一些罕见的情况下,在这些情况下,用户经常在不同文档之间切换上下文,可能是通过跨多个 iframe 运行操作。
outerHeight 中的负边距
jQuery v3.3.0 修复了一个问题,在 .innerWidth() 和 .innerHeight() 的计算中包含滚动条。 但是,该修复没有考虑负边距,这意味着 .outerWidth(true) 和 .outerHeight(true) 不再考虑负边距。 在 3.7.0 中通过将边距计算与滚动条调整分开来解决了这个问题。
在 IE 中使用不同的原生焦点事件
焦点和 blur 事件可能是 jQuery 必须跨浏览器处理的最复杂的事件。 jQuery 3.4.0 在修复通过焦点事件传递数据的问题时引入了一些小的回归,在 jQuery 3.7.0 中移除了这些修改。
但是,需要指出 IE 中可能发生的重大变化。 在所有版本的 IE 中,焦点和 blur 事件都是异步触发的。 在所有其他浏览器中,这些事件是同步触发的,IE 中的异步行为导致了一些问题。 解决方法是更改本机使用的事件。 幸运的是,focusin 和 focusout 在 IE 中是同步运行的,所以现在在 IE 中通过 focusin 模拟焦点,通过 focusout 模拟 blur。 这一更改使 jQuery 能够依赖 IE 中的同步焦点事件,这解决了很多问题。
参考资料
https://blog.jquery.com/2023/05/11/jquery-3-7-0-released-staying-in-order/
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/87520.html