首页 前端知识 jQuery 4 beta 震撼发布

jQuery 4 beta 震撼发布

2024-08-14 00:08:36 前端知识 前端哥 128 635 我要收藏

2811f4580c6002a2bfdfe78580684c0d.jpeg

概述

去年二月,我们发布了 jQuery 4.0.0 的第一个测试版。现在我们准备发布第二个测试版,我们预计不久将发布候选版本™。这次发布带来了对 jQuery 测试基础设施的重大重写,移除了所有已弃用或支持不足的依赖项。但主要的变化是修复了捆绑器的导出字段。以下是更多关于这方面的信息和其他变化。

jQuery 4.0.0 中的许多破坏性变化是团队多年来一直想做的,但在补丁或次要版本中无法实现。我们削减了遗留代码(包括移除对 IE 11 之前的版本的支持),移除了一些之前已弃用的 API,移除了一些从未记录的公共函数的内部参数,并放弃了一些过于复杂的“魔法”行为。

在最终发布之前,我们将发布一个全面的升级指南,概述移除的代码以及如何迁移。jQuery Migrate 插件也将准备好提供帮助。现在,请尝试这个版本,并让我们知道你是否遇到任何问题。

像往常一样,该版本可以通过我们的 CDN 和 npm 包管理器获取。第三方 CDN 将不会托管这个测试版发布,但稍后将托管 4.0.0 的最终版本。以下是 jQuery 4.0.0 beta.2 的一些亮点。

CommonJS + ESM

有许多不同的方式来在项目中包含 jQuery。支持它们可能很困难,特别是当环境同时支持 CommonJS 和 ESM 模块时。我们希望支持所有可能包含 jQuery 的方式,无论是使用命名导出还是默认导出。我们还希望确保 jQuery 只被包含一次,即使在同一环境或捆绑包中同时使用 ESM 的 import 和 CommonJS 的 require。我们认为我们已经找到了一个支持 Node.js 和像 rollup、webpack 和 parcel 这样的捆绑器的解决方案。更多细节可以在 PR 中找到。此外,我们还创建了一个维基页面来解释 jQuery 的 package.json 中的 exports 属性在 4.0 中将如何工作。

布尔属性

HTML 规范定义了布尔属性,这些属性通常与布尔属性值相关联。如果属性缺失,则与 false 属性值相关联;如果存在,则与 true 属性值相关联。布尔内容属性的唯一有效值是空字符串或完整的属性名称(例如 checked="checked")。

jQuery 历来在 .attr() API 中以特殊方式处理布尔属性:

  1. 对于获取器,只要属性存在,它就会返回小写的属性名称,忽略值。
  2. 对于设置器,当传递 false 时,它会移除属性;否则,它会忽略传递的值并设置属性——有趣的是,在 jQuery >=3 中不再小写。

问题是规范偶尔将布尔属性转换为具有特殊行为的其他属性值——一个例子是 hidden 属性的新 "until-found" 值。我们的设置器规范化意味着使用 .attr() 传递这些值是不可能的(.prop() 不受影响)。此外,偶尔还会引入新的布尔属性,jQuery 无法轻易地将它们添加到列表中而不引起破坏性变化。

这个补丁移除了对布尔属性的任何特殊处理——获取器按原样返回值,设置器设置提供的值,有一个例外。为了保持向后兼容性,这个补丁使 false 布尔值触发所有非 ARIA 属性的属性移除。例如,.attr( "checked", false ) 将继续移除 checked 属性,这是将相应属性设置为 false 的唯一方式。ARIA 属性不受此规则限制,因为许多属性将字符串 "false" 识别为具有与属性缺失不同语义的有效值。要移除 ARIA 属性,可以使用 .removeAttr() 或将 null 作为值传递给 .attr()。

表格中元素的位置

jQuery 4.0.0-beta.2 还修复了在表格中查找元素位置时的一些不一致行为。基于位置的偏移父元素可能会根据元素的 position 样式是 static 还是 relative 而改变。

<div&nbsp;id="container"&nbsp;style="position:&nbsp;relative;">
&nbsp;&nbsp;&nbsp;&nbsp;<table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="static"></span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;id="relative"&nbsp;style="position:&nbsp;relative;"></span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr>
&nbsp;&nbsp;&nbsp;&nbsp;</table>
</div>

之前,$('#static').position()&nbsp;返回相对于包含的&nbsp;<td>&nbsp;元素的位置,而&nbsp;$('#relative').position()&nbsp;返回相对于&nbsp;#container&nbsp;的位置。

现在,两个元素都返回相对于&nbsp;#container&nbsp;的位置。

下载

你可以从 jQuery CDN 获取文件,或者直接链接到它们:

  • https://code.jquery.com/jquery-4.0.0-beta.2.js
  • https://code.jquery.com/jquery-4.0.0-beta.2.min.js

你也可以通过 npm 获取这个版本:

npm install jquery@4.0.0-beta.2

精简版构建

有时你不需要 ajax,或者你更喜欢使用许多专注于 ajax 请求的独立库。通常,使用 CSS 和类操作的组合来处理网络动画会更简单。最后,所有 jQuery 支持的浏览器(除了 IE11)现在都支持原生 Promises,因此在大多数情况下不再需要 Deferreds 和 Callbacks。除了包含所有内容的常规版本的 jQuery 之外,我们还发布了一个不包含这些模块的“精简”版本。如今,jQuery 的大小很少是加载性能的问题,但精简版比常规版本小约 8k gzipped 字节。这些文件也可以在 npm 包和 CDN 上获取:

  • https://code.jquery.com/jquery-4.0.0-beta.2.slim.js
  • https://code.jquery.com/jquery-4.0.0-beta.2.slim.min.js

这些更新已经是 npm 上的当前版本。获取 jQuery 的所有方式的信息可在 https://jquery.com/download/ 上找到。公共 CDN 今天收到他们的副本,请给他们几天时间发布文件。如果你急于开始,可以使用我们 CDN 上的文件,直到他们有机会更新。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15544.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!